el-table 合并单元格

绑定合并事件

<el-table :data="tableData" :span-method="objectSpanMethod" border height="400">
    <el-table-column prop="FType" label="检验类型" :formatter="Table_FType_Formatter" width="180">
    </el-table-column>
    <el-table-column prop="ProductName" label="物料名称">
    </el-table-column>
    <el-table-column prop="ProductSpec" label="规格型号">
    </el-table-column>
    <el-table-column prop="BJNum" label="报检数量（求和）">
    </el-table-column>
    <el-table-column prop="BHGNumber" label="样品破坏数（求和）">
    </el-table-column>
    <el-table-column prop="HGNumber" label="合格数量（求和）">
    </el-table-column>
</el-table>

定义合并方法

data: {
    tableData:[], // 表格数据
    rowSpanArr: []
},
methods: {
    handleTableData(tableData) { // 在获取表格数据的地方调用
        // 获取相同名称的个数 tableData: 表格的数据, FType: 确定相同的参数
        let rowSpanArr = [], position = 0;
        for (let [index, item] of tableData.entries()) {
            if (index == 0) {
                rowSpanArr.push(1);
                position = 0;
            } else {
                if (item.FType == tableData[index - 1].FType) {
                    rowSpanArr[position] += 1; //项目名称相同，合并到同一个数组中
                    rowSpanArr.push(0);
                } else {
                    rowSpanArr.push(1);
                    position = index;
                }
            }
        }
        this.rowSpanArr = rowSpanArr
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
            const rowSpan = this.rowSpanArr[rowIndex];
            return {
                rowspan: rowSpan, //行
                colspan: 1 //列
            };
        }
    }
}