Element UI对表格的单元行有选择的做高亮操作

对特别的数据行进行高亮展示。需要在el-table标签内使用row-class-name属性，在methods定义对应的方法，在style定义对应的颜色

template

   <el-table v-loading="loading" :data="data" :row-class-name="tableRowClassName" size="small" style="width: 100%" >
          <el-table-column prop="username" label="用户名" align="center"/>
          <el-table-column prop="xm" label="姓名" align="center"/>
     </el-table>

methods

    tableRowClassName({ row, rowIndex }) {
      if (row.jybsf === 1) {
        return 'warning-row'
      }
      return ''
    }

style

  .el-table .warning-row {
    background: hotpink !important;
  }

  .el-table .warning-row:hover>td {
    background: hotpink !important;
  }

---

注意

  .el-table .warning-row:hover>td {
    background: hotpink !important;
  }

是为了防止鼠标滑动到单元行或者点击时，导致背景色失效。当然你也可以使用透明色

  .el-table .warning-row:hover>td {
    background: transparent !important;
  }

其中:hover是css的选择器