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的索引。上述代码意思是:如果是第一条记录(索引为0),向数组中加入1,并设置索引位置;如果不是第一条记录,则判断它与前一条记录是否相等,如果相等,则向spanArr中添入元素0,0表示该行不显示,并将前一位元素+1,表示合并行数+1,以此往复,得到所有行的合并数。
然后根据得到的合并数组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 数组,不然合并会错乱。