element ui中table组件如何实现将checkbox 选中后，高亮选中的行

Question

类似于这种选择方式，希望将选中的行实现高亮，最主要的是我想要实现的是动态的，当我选中某一行后实现高亮

Answer 1

我的解决方法用到了@selection-change="handleSelectionChange" :row-style="rowClass"，在handleSelectionChange中取到所有checkbox选中的内容保存在selectData，然后监听selectData 判断选中行在table列表里面的位置，将所有的index保存在selectRow中，最后在rowClass中给对应的行添加背景色data(){    return {         selectRow:[],         selectData:[]     } },   methods: {    // 选中筛选结果时候     handleSelectionChange(data) {      this.selectData = data;     },    // 多选高亮选中行     rowClass({row, rowIndex}){      if(this.selectRow.includes(rowIndex)){        return { "background-color": "rgba(185, 221, 249, 0.75)" }       }     }   }, watch: {     selectData(data) {      this.selectRow = [];      if (data.length > 0) {           data.forEach((item, index) => {          this.selectRow.push(this.tableData.indexOf(item));         });       }     } }