Bootstrap

elementUI使用table组件中的row-class-name属性不生效的问题

官方文档:可以通过指定 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属性不生效(测试过,奇数行生效)。

;