Element 动态合并列

本是古典何须时尚 2022-12-09 13:58 226阅读 0赞

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