vxe-table、vxe-grid合并行配置项生成方式

mergeCells:[{ "row": 0, "col": 2, "rowspan": 3, "colspan": 1 },.....]

/**
 * 设置表格合并行的公共方法
 * @param {any[]} list 表格数据
 * @param {any[]} columns 表头
 * @param {String[]} merges 要合并的列字段名组成的数组
 * @param {String[]} condition 判断条件的字段名组成的数组
 * @param {String} field 表头取值的字段名
 */
export function setMergeCells({ list = [], columns = [], merges = [], condition = [], field = 'field' }) {
  const validMap = new Map(); // 有效合并配置项
  for (let i = 0; i < list.length; i++) {
    // 根据判断条件取出当前行对应的表格数据，生成唯一标识
    const hashKey = condition.map(field => list[i][field]).join('&&');
    let flag = true;
    let count = 1;
    // 从当前索引i开始，往后找，数据相同的话，count自增，否则跳出while循环
    while (flag && i + count < list.length) {
      // 根据判断条件取出下一行的表格数据，生成唯一标识
      const nextRow = condition.map(field => list[i + count][field]).join('&&');
      if (hashKey === nextRow) {
        // 数据相同，count自增
        count++;
      } else {
        // 数据不同，跳出while循环
        flag = false;
      }
    }
    // 将有效的合并配置项存入validMap
    count > 1 && validMap.set(hashKey + '_' + i, { row: i, rowspan: count });
    // i 跳过已合并的行，减 1 是因为 i++
    i += count - 1;
    // 重置 while 循环标识
    flag = true;
  }
  // 合并记录转换
  const recordsList = [...validMap.values()];
  if (recordsList.length == 0) {
    return [];
  }
  // 预处理列索引
  const cols = merges.reduce((acc, mergeField) => {
    const idx = columns.findIndex(item => item[field] === mergeField);
    idx !== -1 && acc.push(idx);
    return acc;
  }, []);
  // 遍历列索引，生成合并单元格配置集合
  const mergeCells = recordsList.flatMap(({ row, rowspan }) => cols.map(col => ({ row, col, rowspan, colspan: 1 })));
  return mergeCells;
}

<template>
  <vxe-grid ref="xGrid" v-bind="gridOptions" />
</template>

<script>
export default {
  data() {
    return {
      gridOptions: {
        // ...otherParmas,
        mergeCells: [],
        columns: [
          { field: 'sex', title: '性别' },
          { field: 'name', title: '姓名' },
          { field: 'idCard', title: '身份证' },
          { field: 'time', title: '时间' }
          // ...otherColumns,
        ],
        data: [
          // ...otherData,项目中一般是异步请求数据
          { id: 10001, sex: 'xxxx', name: 'xxxx', idCard: 'xxxx', time: 'xxxx' }
        ]
      }
    };
  },
  created() {
    // 请求数据后执行合并方法
    this.setRowSpans()
  },
  methods: {
    // 合并单元格
    setRowSpans() {
      const options = {
        list: this.gridOptions.data, // 表格数据
        columns: this.gridOptions.columns, // 完整表头
        merges: ['sex', 'name'], // 需要合并的列
        condition: ['idCard'], // 合并条件
        field: 'field' // 表头取值的字段
      };
      // 传入此配置项，是指将idCard相等的相邻数据合并，如果两条数据不相邻即使idCard相等也不会合并
      this.mergeCells = setMergeCells(options);
      console.log('this.mergeCells: ', this.mergeCells);
    }
  }
};
</script>