动态合并行和列
根据key值是否相同来合并 列或行。
效果图：
核心思想是构造存放rowspan，colspan 对应关系的数组。
element-ui 提供span-method 的方法。 具体查看文档。
<el-table :data="listData" border :span-method="arraySpanMethod">
// 构造 this.rowspanMapArr 如下图所示
// 构造 this.colspanMapArr 如下图所示
arraySpanMethod({
row, column, rowIndex, columnIndex }) {
return {
rowspan: this.rowspanMapArr[columnIndex][rowIndex],
colspan: this.colspanMapArr[rowIndex][columnIndex],
};
},
对应的key 数组。
const keyMap = [
'key1',
'key2',
'key3',
'key4',
]
// arraySpanMethod 里面用了下标，所以不在keyMap 除去不合并的 key
const norMergeKeyArr = [
'key4',
]
data(){
return {
listData: [
{
key1:'上下行合并',
key2:'1111'
key3:''
},
{
key1:'上下行合并',
key2:'1111'
key3:''
},
{
key1:'左右列合并',
key2: null
key3: null
},
]
}
},
created(){
console.log('listData.length-->', this.listData.length)
keyMap.forEach((keyName, innerIndex) => {
this.rowspanMapArr.push(this.rowspan( [], 0, keyName) )
})
console.log('rowspanMapArr---> ',this.rowspanMapArr)
this.genrateColspanArr();
},
methods: {
rowspan(spanArr, position, spanName) {
this.listData.forEach((item, index) => {
if( norMergeKeyArr.includes(spanName)){
spanArr.push(1);
}else{
if (index === 0) {
spanArr.push(1);
position = 0;
} else {
if (
this.listData[index][spanName] ===
this.listData[index - 1][spanName]
) {
spanArr[position] += 1;
spanArr.push(0);
} else {
spanArr.push(1);
position = index;
}
}
}
});
return spanArr
},
genrateColspanArr() {
this.listData.forEach((item, outIndex) => {
let curPos ;
let colMapArr = []
keyMap.forEach((keyName, innerIndex) => {
if ( innerIndex === 0 && item[keyName] ) {
colMapArr.push(1);
curPos = 0;
} else {
//。左右列合并 通过判断 key 是否为 null 之类的，具体情况具体分析。
// 最好用lodash 之类工具判断
if ( !item[keyName] && item[keyName] != 0 ) {
colMapArr[curPos] += 1;
colMapArr.push(0);
} else {
curPos = innerIndex
colMapArr.push(1);
}
}
})
this.colspanMapArr.push(colMapArr)
});
console.log('colspanMapArr--',this.colspanMapArr)
},
arraySpanMethod({
row, column, rowIndex, columnIndex }) {
return {
rowspan: this.rowspanMapArr[columnIndex][rowIndex],
colspan: this.colspanMapArr[rowIndex][columnIndex],
};
},
},
总结：
这里分rowspan 和 colsan 情况。
- 根据数据源的同个key 的value值是否一致，来判断是否上下行合并。 计算出各个rowspan的值。
- 根据单条数据源内的key对应的value值，要保证一定的顺序。也就是说，下一个key的value值为null，上一个key的value值不为null 而合并，计算出各个 colspan 值。
