elementui表格单行高亮用法及高亮样式无效问题解决_elementui高亮某一行

element table 数据表格指定行高亮写法

table写法

 <el-table
           :row-class-name="tableRowClassName"
           >
</el-table>
1
2
3
4

重点：数据表格上添加动态绑定样式，:row-class-name="tableRowClassName"。

method中添加切换样式方法

tableRowClassName({row, rowIndex}) {
    if (rowIndex === 0) {
        return 'highlight-row';
    }
    return '';
},
1
2
3
4
5
6

在这里可以实现高亮算法，我这里是指定了数据表格中的第一行高亮，前面数据表格的写法上就是在这里动态绑定的样式。所以还差一个高亮样式，在

<style scoped>
    .el-table .highlight-row {
        background: #cae3f9;
    }
</style>

1
2
3
4
5
6

到这里，一个数据表格指定行的高亮，就已经实现了。

高亮样式不生效问题解决办法

不过上面的代码，是没法实现高亮的，因为 scoped 导致的样式不生效。

粗暴点的解决办法是直接删掉 scped ，但是会导致样式污染，简单点说就是会导致这个样式变成全局的，其他用到这个样式的地方都可能会被修改。

所以 scoped删不得，在样式中添加 /deep/ ，强制修改默认样式，让你定义的高亮样式生效。

把样式修改如下：

<style scoped>
    .el-table /deep/ .highlight-row {
        background: #cae3f9;
    }
</style>

1
2
3
4
5
6

保存刷新页面，解决问题。