element-ui：el-table合并单元格后的行高亮显示

{
  "list": [
    {
      "id": 1,
      "user_id": 1,
      "name": "王小虎",
      "address": "上海市普陀区金沙江路 1 弄"
    },
    {
      "id": 2,
      "user_id": 1,
      "name": "王小虎",
      "address": "上海市普陀区金沙江路 2 弄"
    },
    {
      "id": 3,
      "user_id": 1,
      "name": "王小虎",
      "address": "上海市普陀区金沙江路 3 弄"
    },
    {
      "id": 4,
      "user_id": 2,
      "name": "张大彪",
      "address": "北京市朝阳区建国路360号"
    },
    {
      "id": 5,
      "user_id": 3,
      "name": "刘大龙",
      "address": "深圳市福田区滨河路路1号"
    },
    {
      "id": 6,
      "user_id": 3,
      "name": "刘大龙",
      "address": "深圳市福田区滨河路路2号"
    }
  ],
  "total": 6
}

$ tree -I node_modules
.
├── package.json
├── pnpm-lock.yaml
└── src
    ├── App.vue
    ├── data.json
    └── main.js

{
  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build"
  },
  "devDependencies": {
    "@vue/cli": "^5.0.4",
    "@vue/cli-service": "^5.0.4",
    "css-loader": "^6.7.1",
    "less": "^4.1.2",
    "less-loader": "^11.0.0",
    "style-loader": "^3.3.1",
    "vue-template-compiler": "^2.6.14"
  },
  "dependencies": {
    "element-ui": "^2.15.8",
    "jquery": "^3.6.0",
    "vue": "2"
  }
}

import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import App from "./App.vue";
Vue.use(ElementUI);
new Vue({
  el: "#app",
  render: (h) => h(App),
});

<template>
  <div class="">
    <!-- 自定义行和单元格的样式类，用于选择器操作 -->
    <el-table :data="list"
      border
      :span-method="objectSpanMethod"
      row-class-name="mo-table__row"
      cell-class-name="mo-table__cell"
      @cell-mouse-enter="handleCellMouseEnter"
      @cell-mouse-leave="handleCellMouseLeave">
      <el-table-column width="80"
        align="center"
        header-align="center"
        prop="user_id"
        label="用户ID">
      </el-table-column>
      <el-table-column prop="name"
        label="姓名"
        header-align="center"
        width="180">
      </el-table-column>
      <el-table-column prop="address"
        label="地址"
        header-align="center">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
// created at 2022-06-02
import data from './data.json';
import $ from 'jquery';
export default {
  name: 'App',
  props: {},
  components: {},
  data() {
    return {
      list: [],
      // 记录当前高亮的行
      highlight_rows: [],
    };
  },
  computed: {},
  methods: {
    // 初始化数据
    getData() {
      // 统计每个用户的地址数量
      let user_address_count_map = {};
      for (let item of data.list) {
        let user_address_count = user_address_count_map[item.user_id] || 0;
        user_address_count_map[item.user_id] = user_address_count + 1;
      }
      // 记录当前行
      let current_item = {};
      this.list = data.list.map((item, index) => {
        // 添加一个行号，用于记录高亮的行
        item.row_index = index;
        // 是否为用户地址的第一条数据，决定开始合并的起始行
        item.is_user_address_first_row =
          item.user_id != current_item.user_id ? true : false;
        // 用户地址的数量，决定合并的行数
        item.user_address_count = user_address_count_map[item.user_id];
        current_item = item;
        return item;
      });
      // console.log(this.list);
    },
    // 合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log(row, column);
      // id和 name列合并
      if (['user_id', 'name'].includes(column.property)) {
        // 每个用户的地址首行合并
        if (row.is_user_address_first_row) {
          return {
            rowspan: row.user_address_count,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    // 当单元格 hover 进入时会触发该事件
    handleCellMouseEnter(row, column, cell, event) {
      // 将所有user_id相同的行都放入高亮数组
      for (let item of this.list) {
        if (row.user_id == item.user_id) {
          this.highlight_rows.push(item);
          // $(event.target).css('background-color', '#f5f5f5');
        }
      }
      this.setTableRowHighlight();
    },
    // 当单元格 hover 退出时会触发该事件
    handleCellMouseLeave(row, column, cell, event) {
      this.highlight_rows.splice(0, this.highlight_rows.length);
      this.resetTableRowHighlight();
    },
    resetTableRowHighlight() {
      // 移除所有高亮行的高亮样式
      $('.mo-table__row').removeClass('mo-table__row--active');
    },
    setTableRowHighlight() {
      // 重新添加高亮行的高亮样式
      for (let item of this.highlight_rows) {
        // 通过预先定义的行号来选中要高亮的行
        let selector = `.mo-table__row:nth-child(${item.row_index + 1})`;
        $(selector).addClass('mo-table__row--active');
      }
    },
  },
  created() {
    this.getData();
  },
};
</script>
<style lang="less">
// 行的样式
.mo-table__row {
}
// 单元格的样式
.mo-table__cell {
}
// 去除element-ui 默认的鼠标移入样式
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background-color: transparent;
}
// 自定义的高亮样式
.el-table--enable-row-hover .el-table__body .mo-table__row--active {
  background-color: #f5f7fa;
}
</style>
<style lang="less" scoped>
</style>