进入以后样式是这样的:css样式根本没有加载,这是为什么?
刷新了页面以后才可以出来,本身样式也是这样的:
找了半天原因,一点一点测试才发现
原来渲染的组件的父盒子的class='item'居然影响了css样式的内容,很奇怪,把class='item'修改成比如:class='abc'就可以了。
原文地址和更多信息:
https://www.3mooc.com/front/articleinfo/465
<el-table-column>并不是一个dom节点,所以infotext这个类究竟用在哪,需要看下el-table-column这个组件的实现才知道。用了第三方组件的必然都会遇到你这样的问题,我说下我的解决方法,不一定是好的。
一个vue文件可以写多个<style></style>,加上socped代表本组件的样式,不污染全局。如果需要覆盖第三方组件样式,则不能加scoped,因此需要另写一个<style>.xxx-component{...}</style>,这里用一个大类包裹防止污染全局。
接着,我用比较笨的方法(有好的方法请告知),就是打开f12检查究竟要覆盖哪些样式,然后写在没有加scoped的style里即可。
其实一些好的第三方UI库都有提供自定义样式的方法的,这样实现起来才是最便捷的。