合并列 使用方法 :span-method=“objectSpanMethod” 要想实现动态合并需要给每一行都设置合并的列数,因为Element的合并是每一行都会执行 所有不需要合并的行也要设置为0
数据结构:[1,5,0,0,0,0,0,5,0,0,0,0,0,2,0,0,6,0,0,0,0,0,0] 其实1 5 5 2 6 就是合并的列数,0其实就是5的位置,已经被5合并 但是Element每一行都会执行,所有要为他设置成0,并且设置colspan为0,隐藏
// 基础布局
<el-table @row-click="rowShowInput" :span-method="objectSpanMethod" style="margin-top: 10px" height="755px" :data="tableData" border stripe size="small" :header-cell-style="{background:'#ECF5FF',color:'#606266',fontWeight:'bold',align:'center'}" highlight-current-row>
<el-table-column
highlight-current-row
align="center"
label="序号"
type="index"
width="60">
</el-table-column>
<el-table-column
highlight-current-row
align="center"
prop="topName"
label="合并列"
width="200">
</el-table-column>
</el-table>
data() {
return {
spanArr:[],
pos:'',
}
},
实现逻辑是 首先第一次循环设置数量为1(this.spanArr.push(1)),记录下标为0(this.pos = 0,0就是spanArr第一次的下标)
第二次循环因为 i 已经不等于0了,所以执行else
判断本次和上一次的 topName 值是否相等,相等的上一次的值+1(this.spanArr[this.pos] += 1) 并设置本次的值为0 ( this.spanArr.push(0))
如果不相等 本次的值为1(this.spanArr.push(1);) 记录本次的下标(this.pos = i)
调用 ergodicData 方法前记得清空 this.spanArr 和 this.pos
//合并行前数据整理 tableData 就是请求下来的数据
ergodicData(tableData) {
for (var i = 0; i < tableData.length; i++ ) {
if( i === 0 ) {
this.spanArr.push(1);
this.pos = 0
} else {
// 判断本次和上一次的 topName 值是否相等
if(tableData[i].topName === tableData[i - 1].topName) {
this.spanArr[this.pos] += 1;
this.spanArr.push(0)
}else {
this.spanArr.push(1);
this.pos = i
}
}
}
},
// 合并工程类型
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 1) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
},