element表格选中高亮和全选

1.选中高亮 

https://www.cnblogs.com/0314dxj/articles/10950793.html

<el-table
  ref="multipleTable"
  :data="tableData"
  tooltip-effect="dark"
  style="width: 100%" max-height="70vh"
  @selection-change="handleSelectionChange"
  :row-style="rowClass"
>
data() {
  return {
    tableData: [],
    selectRow: [],
    selectData: [],
  }
},

methods下

handleSelectionChange(data) {
  this.selectData=data
  console.log('123',data)  //点击的数据
},
rowClass({row,rowIndex}){
  if(this.selectRow.includes(rowIndex)){
    return {"background": "#89c997"}
  }
},

watch: {
  selectData(data){
    this.selectRow = []
    if(data.length > 0){
      data.forEach((item,index)=>{
        this.selectRow.push(this.tableData.indexOf(item))
      })
    }
  }
}

2.全选

https://www.pianshen.com/article/3295711589/

<el-button @click="toggleSelect(tableData)" size="mini">全选/反选</el-button>
<el-button @click="deleteSelect" type="danger" size="mini">删除</el-button>

  data() {
      return {
        // 表格数据
        tableData: [],
        // 列表全选与否
        allSelect: false
      }
    },
    methods: {
      toggleSelect(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row, !this.allSelect)
          })
          this.allSelect = !this.allSelect
        }
      }
    }
  }