element实现点击选中行数据和高亮显示选中的多行数据

首先是实现点击行选中当前的行数据

1.给Table表格加上方法

//方法作用可见element官网说明
@row-click="handleRowClick"
//需要给table先设置标记属性
ref="table" 

2.加上自己的方法

    // 点击行选中复选框
handleRowClick(row, column, event){
  //给操作列设置不触发选中
  //如果有编辑删除按钮使用了模板函数，可以根据传递的column参数,判断里边的
  //label值，来判断是否触发选中
  this.$refs.table.toggleRowSelection(row);
},

3.点击行可以看到已选中数据

<template slot-scope="scope">
   <button>编辑</button>
</template>

实现选中多行数据的高亮

1.先给Table加上属性方法

//参考官网说明
:row-style="tableRowClassName" 
//取消掉鼠标悬浮时的效果
:cell-style="{background: 'revert'}"

2.自定义方法

//rowstyle 添加样式
tableRowClassName({row, rowIndex}){
  if(this.selectRow.includes(rowIndex)){
    return { "background-color": "#d5e8fa" }
  }
}

3.效果