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

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

table写法

 <el-table
           :row-class-name="tableRowClassName"
           >
el-table>

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

method中添加切换样式方法

tableRowClassName({row, rowIndex}) {
    if (rowIndex === 0) {
        return 'highlight-row';
    }
    return '';
},

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



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

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

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

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

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

把样式修改如下:



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

你可能感兴趣的:(开发踩坑,web前端,elementui)