Element-UI el-table点击复选框或点击数据行，当前行高亮显示

Element-ui el-table点击复选框或点击数据行，当前行高亮显示

一 . 点击复选框,复选框选中当前行高亮显示:

1. 首先给el-table 标签绑定rowStyle方法,通过指定 el-table 组件的 row-class-name 属性来为 table 中的某一行添加 class改变背景样式，当点击复选框会触发selection-change事件,还要添加handleSelectionChange方法.

  <el-table  @selection-change="handleSelectionChange" :row-class-name="rowStyle">

2. handleSelectionChange方法,定义一个空数据用于存放当前选择的数据的id.

 handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);

3. 遍历点击选中的id，比对id值是否相同,为true返回"rowStyle"样式.

// 当前数据行背景样式
    rowStyle({ row }) {
      var arr = this.ids;
      for (let i = 0; i < arr.length; i++) {
        if (row.id === arr[i]) {
          return "rowStyle";
        }
      }
    },

4. 定义rowStyle的CSS样式内容.

// 点击后背景颜色和文本颜色
::v-deep .rowStyle {
  background-color: #e8f7fd !important;
  color: #1890ff;
}
// 鼠标滑过背景颜色
::v-deep .el-table tbody tr:hover > td {
  background-color: #e8f7fd !important;
}

5. 效果展示

二. 点击数据行,复选框选中,当前行高亮显示:

1. 给el-table 标签绑定row-click方法,官方解释:当某一行被点击时会触发该事件.

<el-table @row-click="handleRowClick" >

1. 点击行触发，选中或不选中复选框,从而触发rowStyle方式改变当前行样式

 handleRowClick(row) {
      this.$refs.table.toggleRowSelection(row);
    },

3. 效果同第一种相同
   

三. 结语：如果此文章对你的项目有所帮助，请帮忙点个赞加个收藏以备后续查找方便.谢谢喔！！！

温馨提示:以上方法可以叠加添加使用.!!!