官方文档:可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class,表明该行处于某种状态。
效果:
不生效原因:
在elementUI中,row-class-name、row-style、cell-class-name等属性要想生效必须使用全局class才能生效。
解决方法:
-
如果代码都是在组件中编写的,可以去除
<style scoped></style>
中的scoped即可该组件中的样式变为全局属性。
缺点:scoped控制局部显示样式的,去掉的话,可能会与其他的页面有样式冲突 -
保留scoped属性,单独写个css样式,引入文件
<style scoped>
/*两种引入写法都行*/
/*@import url('../../assets/css/global.css');*/
@import "../../assets/css/global.css";
/*.el-table .warning-row {*/
/* background: oldlace;*/
/*}*/
/*.el-table .success-row {*/
/* background: #f0f9eb !important;*/
/*}*/
/*
经测试,可以将这里的样式写在父组件上(不推荐,不好维护)
也可以将引入的css写在main.js文件里,import '/src/assets/css/global.css'; 这样也能实现效果(路径根据实际修改)
*/
</style>
—————————————————————————————————————————————————————————————
上述基本都能解决,如果以上都不生效,尝试下面方法:
stripe属性可以创建带斑马纹的表格。它接收一个Boolean,默认为false,设置为true即为启用。
删除stripe属性
row-class-name属性和stripe属性同时使用会有一定的局限性,stripe属性默认是偶数行变色(背景色变得深一点,奇数行背景色为白色),
当设置row-class-name属性是偶数行时,就会与stripe属性冲突,导致当前行的row-class-name属性不生效(测试过,奇数行生效)。