elementUI table表格动态合并行
该组件提供了一个直观的界面来呈现大量具有相似特征的数据记录，并支持排序功能、筛选选项以及比较模式等多种自定义设置。
在实际项目中，当遇到需要固定合并行或列的情况时，在表格对象中传递一个名为spanMethod的函数，并将其参数设置为包含当前行、当前列、当前行号和当前列号四个属性的对象。该函数的功能是实现对行或列的合并操作，并根据需要返回一个包含两个元素的数组（表示rowspan和colspon）或者是一个包含属性 named rowSpan 和 colSpan 的对象。
本文先阐述合并固定行的例子，然后再阐述合并动态行的例子。
1. 合并固定行及固定列
前后方处理完成后，在线前端系统将根据需求接收后方返回的数据，并在本地展示成如图所示的表格形式。而后方返回的数据呈现方式如图所示：
前台拿到数据后，首先获取数据长度：
this.dataLen = this.dataList.length
AI写代码然后对第一列进行合并：
if (columnIndex === 0) { // 第一列
if (rowIndex === 0) { // 第一行时，合并dataLen行1列
return {
rowspan: this.dataLen,
colspan: 1,
}
} else { // 其他行时，合并0行0列
return {
rowspan: 0,
colspan: 0,
}
}
}
AI写代码接下来对第二列进行合并：
if (columnIndex === 1) { // 第1列
if (rowIndex === 0) { // 第一行时，合并dataLen - 1行1列
return {
rowspan: this.dataLen - 1,
colspan: 1,
}
} else if (rowIndex == this.dataLen - 1) { // 最后一行时，合并1行1列
return {
rowspan: 1,
colspan: 1,
}
} else {
return { // 其他行时，合并0行0列
rowspan: 0,
colspan: 0,
}
}
}
AI写代码最后，对最后一行进行合并：
if (rowIndex === this.dataLen - 1) { // 最后一行
if (columnIndex === 2) { // 第3列，合并1行9列
return [1, 9]
} else { // 其他行，合并1行1列
return [1, 1]
}
}
AI写代码至此，合并固定行列的例子就完成了。接下来阐述合并动态行的例子，如下。
前三列中可能会将1至多几行列进行整合？具体来说，并根据后台返回的数据来确定具体需要整合多少行列
[
{
rkNum: 'RK000005',
date: '2021-08-09',
wlCompany: '504厂',
purchaseQuantity: 2.0,
barCode: 'CP000001',
barName: '按键板',
barType: '504厂',
barUnit: '件',
barNum: 2,
barPrice: 0,
remark: '',
},
{
rkNum: 'RK000004',
date: '2021-07-20',
wlCompany: '504厂',
purchaseQuantity: 2.0,
barCode: 'CP000001',
barName: '按键板',
barType: '504厂',
barUnit: '件',
barNum: 5,
barPrice: 0,
remark: '',
},
{
rkNum: 'RK000004',
date: '2021-07-20',
wlCompany: '504厂',
purchaseQuantity: 2.0,
barCode: 'CP000002',
barName: '显示屏',
barType: '504厂',
barUnit: '件',
barNum: 5,
barPrice: 0,
remark: '',
},
]
AI写代码前端接收来自后端返回的数据。
对这些数据进行处理。
统计每条记录需要合并的条数。
代码如下：
this.tableList = res.result
for (var i = 0; i < this.tableList.length; i++) {
if (i === 0) {
this.spanArr.push(1);
this.pos = 0
} else {
// 判断当前元素与上一个元素是否相同
if (this.tableList[i].rkNum === this.tableList[i - 1].rkNum) {
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.pos = i;
}
}
}
console.log(this.spanArr)
AI写代码其中tableList是从后台获取的一组数据；一般情况下是一个数组；spanArr则被用作存储每一行记录的合并数；而pos则是(spanArr)中的一个索引值。
上述代码的基本逻辑如下：当处理第一条记录（其索引为0）时，在spanArr中插入数值1，并标记该位置；而对于后续的非第一条记录，则需比较当前记录与前一条记录的状态：如果两者相等，则在spanArr中添加元素0（表示该行不应显示）；同时将前一位元素加1以表示合并次数；以此类推循环操作直至完成所有行数的合并统计。
然后基于获得的合并后的数组spanArr，完成表格的连接到合并方法中。
<el-table :data="tableList" border stripe :span-method="cellMerge">
</el-table>
AI写代码 cellMerge({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
},
AI写代码至此，动态合并行功能完成。
在处理数据时需要注意以下几点：当后端返回数据时（尤其是具有相同的rkNum值的数据），应依次返回以保持顺序；同时在重新加载数据时，请确保清除spanArr数组以避免合并混乱。