el-table表格中行样式修改不生效

目录标题

• • 问题描述、问题重现
  • 解决方案
  • 踩坑

问题描述、问题重现

官网API说明

可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。

在el-table标签中加入:row-class-name=“tableRowClassName” 属性，然后添加自己的实现方法:

tableRowClassName({ row }) {
      if (row.number === '一' || row.number === '二' || row.number === '三') {
        return 'warning-row'
      }
      return ''
    }

再在style标签中添加用到的样式：

.el-table .warning-row {
    background: grey;
  }

到这里代码就改完了，保存刷新页面，bingo，页面列表没有变动，含有‘一’、‘二’等大标题的行颜色没变,F12查看这一行DOM已经把warning-row样式类加上了，所以可能是这个样式有问题。

解决方案

这个是官网的坑，直接样式直接写 .warning-row就行了，不能在前面加其他选择器，这样就降低了此处的优先级。

 .warning-row {
    background: grey;
  }

踩坑

起先网上查了一下有下面两种方法，考虑了一下感觉都是弊大于利，直接跳过吧，小坑而已不用大费周章。

1. 在elementUI中，row-class-name、row-style、cell-class-name等属性要想生效必须使用全局class才能生效。因为之前的代码都是在组件中编写的，所以去除中的scoped即可该组件中的样式变为全局属性。
2. 通过单独引用css文件的方式解决，需要把用到的样式单独写到css文件里