elment表格多选变色 vue Element-ui 表格多选

网上其他地方查到的都是一截一截的,或者是不能全选变色.记录一下demo.也算填坑了.

<template>
  <div class="Independent">
    <el-table
      :row-class-name="tableRowClassName"
      ref="mutipleTable"
      height="60vh"
      :data="edittableData"
      tooltip-effect="dark"
      style="width: 100%"
      @select="handleSelectionChange"
      @select-all="handselectall"
      border
      :header-cell-style="{background:'#b8dbf7',padding:'0px',color:'#000000',fontWeight:'normal'}"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="SKU">
        <template slot-scope="scope">{{ scope.row.goods_sku }}</template>
      </el-table-column>
      <el-table-column prop="model" label="型号"></el-table-column>
      <el-table-column prop="color" label="颜色"></el-table-column>
      <el-table-column prop="size" label="尺寸"></el-table-column>
      <el-table-column prop="num" label="现库存"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      edittableData: [
        { goods_sku: "1" },
        { goods_sku: "2" },
        { goods_sku: "3" },
        { goods_sku: "4" },
        { goods_sku: "5" },
        { goods_sku: "6" },
        { goods_sku: "7" },
        { goods_sku: "8" },
        { goods_sku: "9" },
        { goods_sku: "10" },
        { goods_sku: "11" }
      ],
      numbers: []
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    // 变色样式监听
    tableRowClassName({ row, rowIndex }) {
      let color = "";
      this.numbers.forEach((r, i) => {
        if (rowIndex === r) {
          color = "warning-row";
        }
      });

      return color;
    },
    // 全选变色
    handselectall(selection) {
      console.log(selection);

      if (selection.length > 0) {
        for (let index = 0; index < selection.length; index++) {
          this.numbers.push(index);
        }
      } else {
        this.numbers = [];
      }
    },
    // 多选变色
    handleSelectionChange(val, o) {
      this.multipleSelection = val;

      console.log(o);

      this.edittableData.forEach((r, i) => {
        console.log(i);

        if (r.goods_sku == o.goods_sku) {
          /* console.log(this.numbers.indexOf(i)) */
          if (this.numbers.indexOf(i) == -1) {
            this.numbers.push(i);
          } else {
            this.numbers.splice(this.numbers.indexOf(i), 1);
          }
        }
        console.log(this.numbers);
      });
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
/deep/ .el-table .warning-row {
  background: skyblue;
}

/deep/ .el-table .success-row {
  background: #f0f9eb;
}
</style>

不喜勿喷,谢谢~