elementui按照数据源动态合并单元格示例

<link href="https://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css" rel="stylesheet" type="text/css" />
<div id="app">
    <template>
        <div>
            <el-table ref="mytable"
                      :data="tableData"
                      border
                      style="width: 100%; margin-top: 20px">
                <el-table-column prop="no"
                                 label="序号"
                                 width="180">
                </el-table-column>
                <el-table-column prop="type"
                                 label="故障类别">
                </el-table-column>
                <el-table-column prop="num"
                                 label="合计件数">
                </el-table-column>
                <el-table-column label="按版本故障件数统计" align="center">
                    <el-table-column prop="version"
                                     label="版本">
                    </el-table-column>
                    <el-table-column prop="vnum"
                                     label="件数">
                    </el-table-column>
                </el-table-column>
            </el-table>
        </div>
    </template>
</div>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.15.13/lib/index.js"></script>
<script>total=0
    var Main = {
        data() {
            return {
                tableData: []
            };
        },
        mounted() {
            //ajax模拟
            setTimeout(() => {
                let leftData = [{ type: '原因不明', num: 1 }, { type: '信号原因', num: 33 }, { type: '未知', num: 17 },];
                let rightData = {
                    原因不明: [{ num: 1, type: 'V1.01.010' }],
                    信号原因: [{ num: 15, type: 'V1.01.010' }, { num: 6, type: 'V1.01.009' }, { num: 12, type: '未知' }],
                    未知: [{ num: 3, type: 'V1.01.010' }, { num: 14, type: 'V1.01.008.2' }],
                }
                let data = []
                leftData.forEach((ld, no) => {
                    ld.no = no + 1;//序号
                    rightData[ld.type].forEach(rd => {
                        rd.version = rd.type;//更改右边数据type属性为version属性
                        rd.vnum = rd.num;//同理
                        //左边和右边合并后加入数组
                        data.push({
                            ...rd,
                            ...ld
                        })
                    })
                });
                this.tableData = data;
                return
                this.$nextTick(() => {
                    let rows = this.$refs.mytable.$el.querySelectorAll('tr.el-table__row');
                    let cellCount = 3;//前3列合并
                    let rowCount = rows.length;
                    let removeTds = [];//合并后被删除的td集合
                    for (let col = 0; col < cellCount; col++) {
                        let rowSpan = 1, row, startTRIndex = 0;
                        for (row = 1; row < rowCount ; row++) {
                            if (rows[row - 1].cells[col].innerText.trim() != rows[row].cells[col].innerText.trim()) {
                                if (rowSpan > 1) {
                                    rows[startTRIndex].cells[col].rowSpan = rowSpan;//跨行合并
                                    //删除单元格
                                    for (let j = row - 1; j > startTRIndex; j--) {
                                        removeTds.push(rows[j].cells[col]);
                                    }
                                }
                                rowSpan = 1;
                                startTRIndex = row;
                            }
                            else rowSpan++;
                        }
                        
                        if (rowSpan > 1) {
                            rows[startTRIndex].cells[col].rowSpan = rowSpan;//最后一个单元格
                            //删除单元格
                            for (let j = row - 1; j > startTRIndex; j--) {
                                removeTds.push(rows[j].cells[col]);
                            }
                        }
                    }
                    for (let td of removeTds)td.parentNode.removeChild(td)
                })
            }, 200)
        }
    };
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>