官方文档简单说明:
/**
* 表格合并
* @param {*} param0
* row 表格每一行的数据
* column 表格每一列的数据
* rowIndex 表格的行索引,不包括表头,从0开始
* columnIndex 表格的列索引,从0开始
*/
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) { // 合并第一列的行数据 合并多列的中间用||隔开
if (rowIndex % 1 === 0) { // 从第二行开始 ,这样第一行的其他数据不会别合并
return {// 这里返回的是行和列的合并数量,可以返回一个数组,也可以返回一个对象,效果一样
rowspan: 2,// 合并行数
colspan: 1 // 合并列数
};
} else {
return { // 表示其他列的数据进行消除,本例就是columnIndex === 0,第一列第二行下面的数据省略
rowspan: 0,
colspan: 0
};
}
}
上面是静态数据的格式
现在介绍我动态数据怎么合并:
我的数据格式:
列表里面为对象 ,因为表关系是一对多的 经过联合查询 有一部分数据是重复的所以进行合并。
dealTable() {//数据处理
//vm.dataList为列表数据,vm.getDate为存放合并数据的列表
//思路是将列表重复数据的第一条数据的下标、重复次数取出放入vm.getDate供其他方法使用
let data = vm.dataList;
for (index in data) {
var flag = true;
var i = 1;
for (index1 in vm.getDate) {//去重
if (data[index].hzzygtxyId == vm.getDate[index1].id) {
flag = false;
vm.getDate[index1].len++;
}//end if
}
if (flag) {
vm.getDate.push({
id:data[index].hzzygtxyId,
index: index,
len: i为重复次数
})
}
}//end for
},
objectSpanMethod({row, column, rowIndex, columnIndex}) {
vm.dealTable();
if (columnIndex != 7 && columnIndex != 8) {
let ind = null;
let len = 1;
for (index in vm.getDate) {
if (rowIndex == vm.getDate[index].index) {//查询进入的行数据是否在vm.getDate里面,若里面存在将合并的行数进行赋值
ind = 1;
len = vm.getDate[index].len;
}
}
if (rowIndex % ind === 0) {
return {
rowspan: len,//合并行数
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
},
效果
先看官方文档,网上类似说明也很多,但是要根据自己的数据格式进行代码改变,得到你想要的效果。