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

原创

彭世瑜 2022-06-04 00:46:28 ©著作权

文章标签 ui vue.js javascript 高亮 jquery 文章分类 OpenStack 云计算

©著作权归作者所有：来自51CTO博客作者彭世瑜的原创作品，请联系作者获取转载授权，否则将追究法律责任

有如下一份数据

src/data.json

{
  "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
}

完整数据默认显示如下
element-ui：el-table合并单元格后的行高亮显示_高亮

需求

需要按照合并相同用户的名字列（user_id）显示到表格中

方案：

通过el-table 所提供的参数，可以设置span-method 属性，来控制列或行的合并

合并后，发现鼠标经过某一单元格后，并没有按照所期待的那样，整个行数据都有背景色显示
element-ui：el-table合并单元格后的行高亮显示_ui_02
我们还需要对单元格的样式进行处理

当鼠标经过某一行时，需要把已合并的这几行都设置相同的背景颜色，

通过参考其他文章，发现实现方案代码都不完整，或者不能实现相应的效果

于是，采用：事件监听 + jqeury 的实现方案，思路：

通过el-table 提供事件监听方法：鼠标移入单元格@cell-mouse-enter ，鼠标移出单元格@cell-mouse-leave
当鼠标移入某个单元格时，将需要高亮的行通过jquery动态添加自定义类名，实现高亮
当鼠标移出单元格时，通过jquery 将所有的行都去除高亮类名，实现重置显示状态

最终实现的效果
element-ui：el-table合并单元格后的行高亮显示_javascript_03

完整代码

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

package.json

{
  "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"
  }
}

src/main.js

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),
});

src/App.vue

<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>