文章介绍了如何使用ElementUI的table组件进行行列合并，包括固定行和列的合并以及动态根据后台数据合并行。通过span-method方法，可以自定义合并规则，例如基于特定条件返回rowspan和colspan。对于动态合并，关键在于分析后台数据，找出需要合并的行数，并存储在数组中，然后在表格渲染时应用这些合并信息。
elementUI table表格用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
有时业务需求合并固定的行或者列，elementui官方给出相应例子，可学习一下再应用至项目中。通过给table传入span-method方法Function({ row, column, rowIndex, columnIndex })，可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
本文先阐述合并固定行的例子，然后再阐述合并动态行的例子。
\1. 合并固定行及固定列
前台拿到后台返回数据以后，需展示成如上图所示表格。后台返回数据格式如下图所示：
前台拿到数据后，首先获取数据长度：
this.dataLen = this.dataList.length
然后对第一列进行合并：
if (columnIndex === 0) { // 第一列
if (rowIndex === 0) { // 第一行时，合并dataLen行1列
return {
rowspan: this.dataLen,
colspan: 1,
}
} else { // 其他行时，合并0行0列
return {
rowspan: 0,
colspan: 0,
}
}
}
接下来对第二列进行合并：
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,
}
}
}
最后，对最后一行进行合并：
if (rowIndex === this.dataLen - 1) { // 最后一行
if (columnIndex === 2) { // 第3列，合并1行9列
return [1, 9]
} else { // 其他行，合并1行1列
return [1, 1]
}
}
至此，合并固定行列的例子就完成了。接下来阐述合并动态行的例子，如下。
前1、2、3列，合并行数相同，可能合并1行，可能合并2行，也可能合并更多行，根据后台返回数据确定到底有几行需要合并。后台返回数据格式如下所示：
[
{
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: '',
},
]
前台在获取到后台返回的数据后，对数据进行处理，分析出每一行数据需要合并的行数，代码如下：
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)
其中，tableList是从后台获取的数据，通常是一个数组；spanArr是一个空数组，用于存放每一行记录的合并数；pos是spanArr的索引。上述代码意思是：如果是第一条记录（索引为０），向数组中加入１，并设置索引位置；如果不是第一条记录，则判断它与前一条记录是否相等，如果相等，则向spanArr中添入元素０，０表示该行不显示，并将前一位元素＋１，表示合并行数＋１，以此往复，得到所有行的合并数。
然后根据得到的合并数组spanArr，对表格进行合并，并绑定至合并方法中：
<el-table :data="tableList" border stripe :span-method="cellMerge">
</el-table>
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
}
}
},
至此，动态合并行功能完成。
需要注意的是，后台返回数据时，具有相同rkNum的数据，应该挨着返回。另外，重新加载数据时，记得要清空spanArr 数组，不然合并会错乱。
扫一扫
3189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
