el-table multi selected and highlighted

1, the introduction of table assembly, configure attributes

<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, define a global data

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

3, if the selected line changes, all currently selected row storage

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

4, multiple choice and define the style of the selected row

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;
    },
}