el-table表格合并列

214 阅读1分钟
el-table表格合并列

我这里是合并的第一列和第二列

:span-method="arraySpanMethod" 此处为eltable自带方法, 在这个方法内处理你要合并的行或者列,更换可直接出效果

// 合并表格的列,处理表格数据,传入当前表格数组
flitterData(arr) {
    let spanOneArr = [];
    let concatOne = 0;
    arr.forEach((item, index) => {
        console.log(item);
        if (index === 0) {
            spanOneArr.push(1);
        } else {
            // item.company 是我要合并的值
            if (item.company === arr[index - 1].company) {
                //第一列需合并相同内容的判断条件
                spanOneArr[concatOne] += 1;
                spanOneArr.push(0);
            } else {
                spanOneArr.push(1);
                concatOne = index;
            }
        }
    });
    return {
        one: spanOneArr,
    };
},


arraySpanMethod({ row, column, rowIndex, columnIndex }) {
    console.log(row);
    console.log(column);
    console.log(rowIndex);
    console.log(columnIndex);
    if (columnIndex === 1 || columnIndex === 0) {
        // 表格数据修改
        const _row = this.flitterData(this.tableData)
        .one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
            rowspan: _row,
            colspan: _col,
        };
    }
}