美文网首页切图仔遇到的各种bug
记一次使用wangEditor引起的element-ui表格样式

记一次使用wangEditor引起的element-ui表格样式

作者: 切图仔达文西 | 来源:发表于2020-09-02 18:25 被阅读0次

wangEditor引起的element-ui表格样式错乱是怎么一回事?为什么wangEditor会引起element-ui表格样式错乱呢?随着富文本框在项目中越来越多的使用,很多人发现富文本框会引起element-ui的表格样式错乱,这究竟是怎么一回事呢?大家可能会惊讶,一个富文本编辑框怎么会引起element-ui的表格样式错乱呢,但是事实就是这样。以上就是关于wangEditor引起element-ui引起element-ui表格样式错乱的全部内容了,大家还知道什么关于wangEditor引起element-ui表格样式错乱的内容,欢迎在评论区补充噢~

事情是这样滴,那天深夜文西正在世界最大同性交友网站github上学习PS快捷键大全,测试阿星突然来电说生产出问题惹。作为一个拥有丰富(一年)经验的老(并不)前端,每天都按时下班的当代优秀程序员,我肯定当场否认(推锅),毕竟能上生产的东西必不可能有问题,如果有,那就是后端(或者环境、网络、缓存BlahBlah)的问题(懂的都懂.png)。

听阿星的描述,是我做的工单系统出了问题:有一条工单的历史记录的样式炸了。

听到这里我是不太相信的,毕竟在这条工单之前已经有了两百多条工单都没啥问题,于是我登录系统打开了10086号工单。


当时我就惊呆了

身为老前端的我马上就冷静下来开始分析问题:

  • 表格是使用element-ui做的
  • 同一页面有个富文本输入框wangEditor

element-ui应该不会这样搞我,于是我们把目光转向wangEditor


就你叫富文本框啊

发现富文本框里有个表格,嗯,同样都是表格,字体都这么大,罪魁祸首肯定就是它了!

于是我熟练地按下F12查看样式,果然被我发现了端倪


element表格的样式
富文本框中表格的样式

常威你还说你不会武功!

这些样式是富文本框中的表格样式,又这么巧element-ui表格没有对td进行样式更改,于是就引发了这次惨案。

知道了问题就好办了,在全局的样式文件中加上td的样式(我的是global.less)


添加的样式

加完之后表格也恢复正常惹


这才是我要的样式
于是这次生产危机就这么完美解决啦(到半夜还要爬起来偷偷更新镜像)

相关文章

网友评论

    本文标题:记一次使用wangEditor引起的element-ui表格样式

    本文链接:https://www.haomeiwen.com/subject/zpewsktx.html