Vue + ElementUI表格状态区分，row-class-name属性

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

1.在表格组件上绑定row-class-name属性

        <el-table
          ref="multipleTable"
          :data="tableList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          border
          :key="Math.random()"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            type="selection"
            width="50"
            align="center"
          ></el-table-column>
          <template v-for="item in tableTitle">
            <el-table-column
              :label="item.label"
              :key="item.prop"
              :prop="item.prop"
              min-width="90px"
              align="center"
            ></el-table-column>
          </template>
        </el-table>

2.在样式中加入背景色

 .el-table .info-row {
    background: #e4e7ed;
  }

3.根据业务需求添加方法（methods中）

tableRowClassName({ row, rowIndex }) {
   if (row.isTop && row.isTop == 1) {
      return "info-row";
   }
   return "";
}

注意：row-class-name属性与stripe = true互斥

如果你的表格把stripe 属性设为true，即斑马纹显示，后又设置了row-class-name属性，那row-class-name的效果不会完全体现，还是斑马纹，只是斑马纹的颜色变化了，即row-class-name属性与stripe = true互斥，不能同时存在！！！