使用vue的render生成一个table 需求如下:根据文件类型加载不同的图标

clipboard.png

于是我用css伪类写了几种带折角的图标,起始样式一样,就是颜色和中间文字不一样:

clipboard.png

效果图如下

clipboard.png

然后使用render函数生成表格:

clipboard.png

其实就是根据文件类型不同,加载我写好的class

为了测试我还在table下方单独写了几个div看看效果:

clipboard.png

结果,坑来了。。。。。。。。。。。。。。。。

clipboard.png

下面的静态div一切正常,表格里面的render的没效果?坑我啊?

看一下页面的dom,class已经生成了啊

clipboard.png

对比一下有效果的div

clipboard.png

好像没什么区别,在仔细看看卧槽。。发现问题了。。。。。。。

这是什么鬼

clipboard.png

原来是style scoped生成了css模块化,去掉scoped一切ok

clipboard.png

希望对大家有用

clipboard.png

本文固定链接: http://www.js-code.com/vue-js/vue-js_25503.html