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

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

更多详情配置可见vxe-grid官网 https://vxetable.cn/#/grid/api

配置项规则说明

mergeCells:[{ "row": 0, "col": 2, "rowspan": 3, "colspan": 1 },.....]
vxe表格合并单元格的配置对象中，mergeCells 属性用于定义如何合并单元格。有四个关键字段，它们的意义分别如下：

row: 表示合并起始的行索引（从0开始计数）。在这个例子中，合并起始于第0行。
col: 表示合并起始的列索引（同样从0开始计数）。这里，合并起始于第2列。
rowspan: 定义了合并的行数，即从起始行向下合并的行数。例如，"rowspan": 3 意味着从第0行开始，总共合并3行。
colspan: 定义了合并的列数，即从起始列向右合并的列数。在此例中，"colspan": 1 表示只合并1列，即不跨列合并，因为通常跨度为1默认不显示，但在此结构中用于精确指定。

例子中的这个配置将导致从表格的第0行第2列开始，向下合并3行，同时保持列宽不变（即不跨列合并）

生成配置项集合通用方法

/**
 * 设置表格合并行的公共方法
 * @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;
}

方法简述

此方法 setMergeCells 的目的是根据给定的条件（condition）来合并表格中的行。它接收一个对象作为参数，该对象包含几个关键属性：

1. list（表格数据列表）

2. columns（列定义列表）、

3. merges（指定哪些列应该被考虑合并的字段名列表）、

4. condition（用于判断哪些行应该被合并的条件字段名列表）、

5. field（用于在列定义中查找字段名的键名，默认为 'field'）。

   方法最终返回一个合并单元格的配置集合。

以下是该方法的详细解析：

1. 初始化：
   • 创建一个 Map 对象 validMap，用于存储有效的合并配置项。
2. 遍历数据行：
   • 遍历 list 中的每一行。
   • 对于每一行，根据 condition 字段列表生成一个唯一标识 hashKey，该标识是通过将当前行中 condition 指定的字段值连接（使用 '&&' 作为分隔符）得到的。
   • 使用一个 while 循环从当前行开始向后查找，直到找到与当前行 hashKey 不相同的行或到达列表末尾。
   • 在这个过程中，如果找到与当前行 hashKey 相同的行，则计数器 count 自增。
   • 一旦找到不同的行或到达列表末尾，将有效的合并配置项（如果有多于一行的相同数据）存入 validMap。配置项包括起始行号 row 和需要合并的行数 rowspan。
   • 更新当前行索引 i，跳过已合并的行。
3. 合并记录转换：
   • 将 validMap 中的值（合并配置项）转换为一个数组 recordsList。
   • 如果没有有效的合并配置项，则直接返回空数组。
4. 预处理列索引：
   • 遍历 merges 列表，找到每个需要合并的字段在 columns 中的索引，并将这些索引存储在 cols 数组中。
5. 生成合并单元格配置集合：
   • 使用 flatMap 遍历 recordsList 中的每个合并配置项，并对每个配置项中的每个列索引（cols 数组中的元素）生成一个合并单元格配置对象。
   • 配置对象包括起始行号 row、列索引 col、需要合并的行数 rowspan 以及列跨度 colspan（这里固定为 1，因为方法主要处理行合并）。
   • 最终返回所有合并单元格配置对象的集合。

此方法根据某些条件自动合并具有相同数据的行，以便于在前端表格展示时减少冗余数据，提高可读性。通过指定哪些列应该被考虑合并（merges）和哪些字段用于判断行是否应该合并（condition），提供了灵活的合并逻辑。

该方法在时间复杂度上的简析

1. 遍历数据行：
   • 外层循环遍历list中的每一行，这需要O(n)的时间，其中n是list的长度。
2. 内部while循环：
   • 对于list中的每一行，内部while循环用于查找连续的相同行。在最坏的情况下，这个循环可能会遍历到list的末尾（如果所有行都相同），但在平均情况下，它可能只遍历几行。然而，为了进行时间复杂度分析，我们需要考虑最坏情况，即每一轮外层循环内部的while循环都会遍历剩余的n-i行（其中i是当前外层循环的索引）。
   • 如果我们假设在最坏情况下，每一行都与前一行相同（除了最后一行），那么while循环的总时间复杂度将是O(n) + O(n-1) + O(n-2) + ... + O(1)，这是一个等差数列的和，其和为O(n^2)。
3. Map操作和记录转换：
   • 将合并配置项添加到validMap中以及后续从validMap转换到recordsList数组的操作，其时间复杂度与validMap的大小成正比，但由于validMap的大小受list中相同行的数量影响，且在最坏情况下可以达到O(n)（如果所有行都不同），因此这部分的复杂度可以视为O(n)。然而，由于前面while循环的O(n^2)复杂度，这个O(n)在这里是可以忽略的。
4. 预处理列索引：
   • 遍历merges列表并查找每个元素在columns中的索引是一个O(m*k)的操作，其中m是merges的长度，k是columns的长度。由于m和k通常远小于n，并且不依赖于n，因此这部分的复杂度可以视为常数时间或O(1)（在n的上下文中）。
5. 生成合并单元格配置集合：
   • 这部分操作的时间复杂度与recordsList的大小和cols的长度成正比。在最坏情况下，recordsList的大小可以达到O(n)（如果所有行都不同，则没有合并），而cols的长度是常数。因此，这部分的复杂度可以视为O(n)。然而，同样由于前面while循环的O(n^2)复杂度，这个O(n)在这里也是可以忽略的。

综上所述，setMergeCells函数的时间复杂度主要由内部while循环决定，为O(n^2)。这是因为在最坏情况下，内部while循环需要为list中的每一行都遍历剩余的所有行来查找连续的相同行。其他操作的时间复杂度在这个上下文中是可以忽略的。

使用示例

以vue为示例模板

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

本文由博客一文多发平台 OpenWrite 发布！