element ui 表格的合並

單純列合並

//單純處理合並列情況
getRowColSpan(data,prop) {　
    let rowData = data[this.dataListField] || [],resultArr = [];
    //console.log(rowData)
    let colIndex = 1;
    //得到表格列的數組
    let colArr = this.tableInfos.headers;
    let name="",code=""//行合並字段（名稱，編號）
    //console.log(colArr)
    for (let i = 0; i < rowData.length; i++) {
        let row = rowData[i];
        let pArr=[]
        let colIndex = 1
        for(let j = colArr.length-1; j > -1; j--){
            let cArr = [];
            if(j == 0){
                cArr = [1,colIndex]
                pArr.unshift(cArr)
                continue
            }
            if(row[colArr[j].prop] == row[colArr[j-1].prop]){//存在列合並
                colIndex++
                cArr = [0,0]
            }else{
                cArr = [1,colIndex]
                colIndex = 1
            }
            pArr.unshift(cArr)
        }
        resultArr.push(pArr)
    }
    return resultArr;
},

//調用：
const rowNewSpan = this.getRowSpanFun(res.data,rowSpan,['roomName','number'])
tData.tableInfos.spanMethod = this.arraySpanMethod;

 

單純的行合並的情況

 

//單純的行合並情況
getRowSpan(data,prop) {　
    let rowSpan = [],pos = 0;
    for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          rowSpan.push(1);
          pos = 0;
        } else {
            //console.log(data[i][prop],data[i - 1][prop])
            if (data[i][prop] == data[i - 1][prop]) {// 判斷當前元素與上一個元素的某一屬性是否相同
                rowSpan[pos] += 1;
                rowSpan.push(0);
            } else {
                rowSpan.push(1);
                pos = i;
            }
        }
    }
    return rowSpan;
},
//調用
const rowSpanLeval = this.getRowSpan(tData.tableData, 'roomName');
const rowSpanCount = this.getRowSpan(tData.tableData, 'number');
const spanMethod = ({ row, column, rowIndex, columnIndex }) => {
     if (columnIndex === 0) {
         const _row = rowSpanLeval[rowIndex];
         const _col = 1;
         return { // [0,0] 表示這一行不顯示， [2,1]表示行的合並數
             rowspan: _row,
             colspan: _col
         }
     } else if (columnIndex === 1) {
         const _row = rowSpanCount[rowIndex];
         const _col = 1;
         return { // [0,0] 表示這一行不顯示， [2,1]表示行的合並數
             rowspan: _row,
             colspan: _col
         }
     }
 }
tData.tableInfos.spanMethod = spanMethod;

 

既有行合並又有列合並的情況（推薦）

    // 自定義合並行和列
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
    let mergeLength = 2;//需要進行橫縱合並的列
    if (columnIndex < mergeLength) {
        let finArray = [1, 1];
        // 處理行數據
        let cgname = Object.keys(row)[columnIndex]
        if (rowIndex === 0 || row[cgname] !== this.tableData[rowIndex - 1][cgname]) {
            let rowspan = 1;
            //計算需要進行合並操作的行
            for (let i = 0; i < this.tableData.length - 1; i++) {
                // 只合並連續的
                if (this.tableData[i][cgname] === row[cgname] && this.tableData[i + 1][cgname] === row[cgname]) {
                    rowspan++;
                }
            }
            finArray[0] = rowspan;
        } else {
            finArray[0] = 0;
        }

        // 處理列數據
        let colkeys = Object.keys(row);
        let cgvalue = Object.values(row)[columnIndex]
        if (columnIndex === 0 || row[colkeys[columnIndex - 1]] !== row[colkeys[columnIndex]]) {
            let colspan = 1;
            //計算需要進行合並操作的列
            for (let i = columnIndex; i < mergeLength; i++) {
                // 只合並連續的
                if (row[colkeys[i]] === cgvalue && row[colkeys[i + 1]] === cgvalue && i + 1 < mergeLength) {
                    colspan++;
                }
            }
            finArray[1] = colspan;
        } else {
            finArray[1] = 0;
        }
        return finArray
    }
},
//調用
tableInfos.spanMethod = arraySpanMethod;

 

但是因為我這里是一個頁面中有多個表格，所以用了循環

//請求接口數據之后
initTableSpan(res){
    if (this.showType === 1 || this.showType === 2 || this.showType === 3) {//兩個表格的情況，需要表格的索引
        if (res.code === 200) {
            for (let i = 0; i < this.tableListData.length; i++) {
                let tData = this.tableListData[i]
                tData.tableInfos.spanMethod = ({ row, column, rowIndex, columnIndex }) => {
                    let mergeLength = 2;//需要進行橫縱合並的列
                    if (columnIndex < mergeLength) {
                        let finArray = [1, 1];
                        // 處理行數據
                        let cgname = Object.keys(row)[columnIndex]
                        if (rowIndex === 0 || row[cgname] !== tData.tableData[rowIndex - 1][cgname]) {
                            let rowspan = 1;
                            //計算需要進行合並操作的行
                            for (let i = 0; i < tData.tableData.length - 1; i++) {
                                // 只合並連續的
                                if (tData.tableData[i][cgname] === row[cgname] && tData.tableData[i + 1][cgname] === row[cgname]) {
                                    rowspan++;
                                }
                            }
                            finArray[0] = rowspan;
                        } else {
                            finArray[0] = 0;
                        }

                        // 處理列數據
                        let colkeys = Object.keys(row);
                        let cgvalue = Object.values(row)[columnIndex]
                        if (columnIndex === 0 || row[colkeys[columnIndex - 1]] !== row[colkeys[columnIndex]]) {
                            let colspan = 1;
                            //計算需要進行合並操作的列
                            for (let i = columnIndex; i < mergeLength; i++) {
                                // 只合並連續的
                                if (row[colkeys[i]] === cgvalue && row[colkeys[i + 1]] === cgvalue && i + 1 < mergeLength) {
                                    colspan++;
                                }
                            }
                            finArray[1] = colspan;
                        } else {
                            finArray[1] = 0;
                        }
                        return finArray
                    }
                }

            }
        }
        return true;
    }
    return true;
},
//tableListData格式
<!-- [
            {
                tableData,
                tableInfos:tableInfosOfHVDC,
                status
            },
             {
                tableData,
                tableInfos:tableInfosOfHVDC,
                status
            }
        ] -->

截圖