el-table实现多选并高亮显示

1、引入table组件，配置相关属性

<el-table
      ref="multipleTable"
      :data="tableData3"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      @row-click="handleclick"
      :row-style="rowClass"  //核心项
      row-key="id"
    >
</el-table>

2、定义全局数据

data(){
  return {
 selectRow: [],
multipleSelection:[]
}
}

3、如果选中的行发生变化时，存储当前所选的所有行

watch: {
    multipleSelection(data) {  //存储选中的row
      this.selectRow = [];
      if (data.length > 0) {
        data.forEach((item, index) => {
          this.selectRow.push(item.id);
        });
      }
    }
  },

4、定义多选和选中行的样式

methods: {
    rowClass({ row, rowIndex }) {              //对所选行进行样式设置，最终效果就看这里了
      if (this.selectRow.includes(row.id)) {
        return { "background-color": "rgba(185, 221, 249, 0.75)" };
      }
    },
    rowclick(row) {                           //实现点击多选
      this.$refs.equtable.toggleRowSelection(row);
      },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
}

5、悬浮和选中效果

/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
   background: #00bbee;
   color: #ffffff;
 }
 /deep/ .el-table__body tr.current-row > td {
   background-color: #00bbee !important;
 }