vxe-table、vxe-grid合并行配置项生成方式
作者：GuMoYu
这篇文章主要介绍了vxe-table、vxe-grid合并行配置项生成方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vxe-table、vxe-grid合并行方法配置项生成方法
更多详情配置可见vxe-grid官网
配置项规则说明
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）来合并表格中的行。
它接收一个对象作为参数，该对象包含几个关键属性：
list（表格数据列表）columns（列定义列表）、merges（指定哪些列应该被考虑合并的字段名列表）、condition（用于判断哪些行应该被合并的条件字段名列表）、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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。