element table实现选中改变背景颜色_

 1.重现代码如下： 

 <el-table
          id="self-table"
          :data="sdfslist"
          height="400"
          border
           :row-key="getRowKeys"
          @selection-change="handleSelectionChange"
          @select="selectOne"
          style="width: 100%"
          ref="multipleTable"
          v-loading="listLoading"
         :row-style="tableRowClassName">
         <el-table-column
            type="selection"
            :reserve-selection="true"
            width="55"
          ></el-table-column>
          ......
          ......
          ......
          <el-table-column
            fixed
            style="background: #ffcc99"
            label="姓名"
            min-width="230px"
            align="center"
          >
            <template slot-scope="{ row }">
              <span>{{ row.closeno }}</span>
            </template>
          </el-table-column>
         <el-table-column
            fixed
            style="background: #ffcc99"
            label="标号"
            min-width="200px"
            align="center"
          >
            <template slot-scope="{ row }">
              <span>{{ row.clsa}}</span>
            </template>
          </el-table-column>
 
</el-table>
 
<el-checkbox v-model="allCheck" @change="allCheckEvent">全选</el-checkbox>
 
 
data() {
    return {
      sdfslist: [],
      tableKey: 0,
      multipleSelection: [],
      allCheck: false,
    };
},
 
watch: {
    sdfslist: {
      handler(value) {
        if (this.allCheck) {
          let that = this;
          let len = that.multipleSelection.length;
          value.forEach((row) => {
            for (let i = 0; i < len; i++) {
              if (row.autoid === that.multipleSelection[i].autoid) {
                that.$refs.multipleTable.toggleRowSelection(row, false);
                break;
              } else {
                that.$refs.multipleTable.toggleRowSelection(row, true);
              }
            }
          });
        }
      },
      deep: true,
    },
  },
 
 
methods:{
   selectOne() {
      if (this.allCheck) {
        this.allCheck = false;
      }
    },
    getRowKeys(row) {
      return row.autoid; //唯一标识例如id...等
    },
    allCheckEvent() {
      if (this.allCheck) {
        this.sdfslist.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row, true);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    tableRowClassName({ row, rowIndex }){
       //判断是否相等，相同时改变背景颜色
       let list = this.multipleSelection.find((item) => item.autoid === row.autoid);
             if (list !== undefined) {
                rowBackground.background = "#9FBBFF"
                //rowBackground.color = "red" //字体颜色
                return rowBackground
             } else {
               return "";
        }
 
    },
 
},

2.效果图：