【element-ui】el-table合并列+合并行

需求：表格分别存在合计行（特殊样式），小计行（特殊样式），以及同类项目的列合并。el-table本身提供的方法就支持合并行或列，所以主要还是整理数据的功夫❗❗效果图如下：

ps：后台给的数据是一个数组，每一项是小计行的数据，明细数据塞在了小计行数据里，所以需要自己取出来再大整特整✊

渲染代码如下：

<el-table
        border
        :data="busiFinData"
        :span-method="arraySpanMethod"
        :cell-style="getCellStyle"
        >
    <el-table-column
            prop="_prop.finance_type"
            align="center"
            width="180">
    </el-table-column>
    <el-table-column
            prop="prj_code"
            label="项目代码"
            width="180"
            align="center"
    >
    </el-table-column>
    <el-table-column
            prop="prj_name"
            label="项目名称"
            >
    </el-table-column>
    <el-table-column
            prop="_prop.expend_name"
            label="分项名称"
            align="center"
    >
    </el-table-column>
    <el-table-column
            prop="_prop.acc_name"
            label="发放项目"
            align="center"
    >
    </el-table-column>
    <el-table-column
            prop="busi_amt"
            label="应发金额(单位:元)"
            align="right"
            :formatter="el_tableCurrency"
    >
    </el-table-column>
</el-table>

主要逻辑代码如下：

 1、获取表格数据

// 加载表格
loadInaccApply(callback){
    axios({
        method: 'post', url: '/',
        data: {
            ajax: true, act: '', 
        },
    }).then(response => {
        let resp = response.data;
        if (resp.success) {
            // 支出明细
            let busiList = resp.objectMap.busiList || [];
            let busiFin = [], busiTotal = 0;
            busiList.forEach( busi =>{
                if(busi._prop.finance_type == '财政'){
                    this.$set(busi, 'sumSpan', true);     // 小计行添加标志
                    busiFin.push(busi);
                    busiTotal += busi.busi_amt*1;         // 支出合计行金额
                }
            });
            // 获取表格渲染数据
            this.busiFinData = this.getBusiTable(busiFin, busiTotal, '财政');
            callback && callback();
        } else {
            Valert({msg: resp.message});
        }
    }).catch(error=> {
        Valert({msg:error});
    }).finally(()=>{
        this.loading = false;
    });
},

// 整理支出明细
getBusiTable(busi, amt, type){
    let resultArr = [];
    for (let i=0; i<busi.length;i++){
        let infoList = busi[i]._prop && busi[i]._prop.info_list.length ? busi[i]._prop.info_list:[];
        // 具体明细
        for(let j=0; j<infoList.length;j++){
            resultArr.push(infoList[j]);
        }
        // 小计行
        if(type == '财政'){
            resultArr.push(busi[i]);
        }
    }
    // 自定义合计行
    if(resultArr.length){
        if(type == '财政'){
            resultArr.unshift({'busi_amt':amt, 'totalSpan':true,
                _prop:{'finance_type':'财政支出合计', 'expend_name':'', 'acc_name':''}
            });
        }
    }
    return resultArr;
},

2、合并行和列

  

// 合并单元格
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
    // 支出合计行
    if(row.totalSpan){
        if (columnIndex == 5) {
            return [1, 5];
        } else if (columnIndex == 1 || columnIndex == 2 || columnIndex==3 || columnIndex==4 ) {
            return [0, 0];
        }
    }
    // 小计行
    if(row.sumSpan){
        if (columnIndex == 5) {
            return [1, 4];
        } else if (columnIndex == 2 || columnIndex==3 || columnIndex==4 ) {
            return [0, 0];
        }
    }
    // 合并第一列
    if(columnIndex == 0){
        if (rowIndex == 1) { 
            return {
                rowspan: this.busiFinData.length - 1, colspan: 1
            };
        } else if(rowIndex != 0) {
            return {
                rowspan: 0, colspan: 0
            };
        }
    }
},

// 行样式自定义
getCellStyle({ row, column, rowIndex, columnIndex }) {
    if (rowIndex === 0) {
        // 合计行样式
        return 'font-size: 20px; color: #004A99;';
    } else if (row.sumSpan) {
        // 小计行样式
        return "background-color: #EFEFEF; color: #000000;";
    }
    return '';
}

 至此，大功告成😉