Element 动态合并列

合并列使用方法 :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）

//合并行前数据整理 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
        }
    }
},

Element 动态合并列

猜你喜欢