vue element table 動態資料合併行/列

解決辦法：el-table標籤裡新增 :span-method=“方法名”（前面加“:”表示動態資料），在方法中處理合並行/列的邏輯

colspanMethod:function({row,column,rowIndex,columnIndex}){
    //row:行物件，帶有一行所有資料，column:列物件
    //rowIndex:行索引，columnIndex:列索引
    //載入表格時從（0，0）開始，（0，1）···（1，0）,(1,1)···依次獲取資料
    if(columnIndex===2){
        //每次走到第3列時給單元格加上rowspan和colspan屬性
        const _row = this.spanArr[rowIndex];//從處理完的數組裡獲取
        const _col = _row>0?1:0;
        return {
            rowspan:_row,
            colspan:_col //相當於給給表格加上rowspan,colspan屬性
        }
    }
}
 

//由於資料是動態的，所以頁面載入時需要呼叫下面的方法，根據後臺資料處理以知道要合併的行/列
//得到的spanArr陣列表示某一行所需要合併的列數
getSpanArr:function(data){
    this.spanArr = [];//定義在vue的data中
    if(data==null){
        return;
    }
    for(var i=0;i<data.length;i++){
        if(i===0){
            this.spanArr.push(1);
            this.pos = 0;
        }else{
            if(data[i].ORGNAME===data[i-1].ORGNAME){
                this.spanArr[this.pos]+=1;
                this.spanArr.push(0);
            }else{
                this.spanArr.push(1);
                this.pos = i;
            }
        }
    }
}
 

html：

<el-table ref="table" :data="info" :span-method="colspanMethod">
    <el-table-column type="selection" width="40">
    </el-table-column>
    <el-table-column label="序號" width="60">
        <template slot-scope="scope">
            {{scope.$index+1}}
        </template>
    </el-table-column>
    <el-table-column label="單位" width="260">
        <template slot-scope="scope">
            {{scope.row.ORGNAME}}
        </template>
    </el-table-column>
    <el-table-column label="檔名稱" width="260">
        <template slot-scope="scope">
            {{scope.row.jyFile.FILE_NAME}}
        </template>
    </el-table-column>
</el-table>