vue element table 动态合并

<template>
    <div class="container" ref="table" style="height: 100%">
        <el-table :data="tableData" :height="tableH"
                  style="width: 100%" border  :span-method="objectSpanMethod">
            <template v-for="item in column">
                <el-table-column :prop="item.prop" :label="item.label" :key="item.index"></el-table-column>
            </template>
        </el-table>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                tableH: '',
                obj: {},
                tableData:  [
                    {
                        operators: "其他",
                        province: "广东",
                        room: "广州双线1",
                        abbreviation: "GZ_DB2",
                        bandwidth: "10G",
                        flow:
                            "第一条1G (no latest data,no latest data)第二条1G (no latest data,no latest data)"
                    },
                    {
                        operators: "其他",
                        province: "广东",
                        room: "广州双线２",
                        abbreviation: "GZ_DB2",
                        bandwidth: "10G",
                        flow:
                            "第一条1G (no latest data,no latest data)第二条1G (no latest data,no latest data)"
                    },
                    {
                        operators: "其他",
                        province: "广东",
                        room: "广州双线3",
                        abbreviation: "GZ_DB2",
                        bandwidth: "10G",
                        flow:
                            "第一条1G (no latest data,no latest data)第二条1G (no latest data,no latest data)"
                    },
                    {
                        operators: "电信",
                        province: "浙江",
                        room: "广州双线２",
                        abbreviation: "GZ_DB2",
                        bandwidth: "10G",
                        flow:
                            "第一条10G (no latest data,no latest data) 第二条10G (no latest data,no latest data)  第三条10G (no latest data,no latest data)  第四条10G"
                    },
                    {
                        operators: "电信",
                        province: "浙江",
                        room: "杭州双线２",
                        abbreviation: "GZ_DB2",
                        bandwidth: "10G",
                        flow:
                            "第一条10G (no latest data,no latest data) 第二条10G (no latest data,no latest data)  第三条10G (no latest data,no latest data)  第四条10G"
                    },
                    {
                        operators: "电信",
                        province: "浙江",
                        room: "杭州双线２",
                        abbreviation: "GZ_DB2",
                        bandwidth: "10G",
                        flow:
                            "第一条10G (no latest data,no latest data) 第二条10G (no latest data,no latest data)  第三条10G (no latest data,no latest data)  第四条10G"
                    },
                    {
                        operators: "联通",
                        province: "江西",
                        room: "杭州双线２",
                        abbreviation: "GZ_DB2",
                        bandwidth: "10G",
                        flow:
                            "第一条1G (no latest data,no latest data)第二条1G (no latest data,no latest data)"
                    },
                    {
                        operators: "联通",
                        province: "浙江",
                        room: "浙江双线２",
                        abbreviation: "GZ_DB2",
                        bandwidth: "10G",
                        flow:
                            "第一条10G (no latest data,no latest data) 第二条10G (no latest data,no latest data)  第三条10G (no latest data,no latest data)  第四条10G"
                    },
                    {
                        operators: "移动",
                        province: "江西",
                        room: "江西双线２",
                        abbreviation: "GZ_DB2",
                        bandwidth: "10G",
                        flow:
                            "第一条1G (no latest data,no latest data)第二条1G (no latest data,no latest data)"
                    },
                    {
                        operators: "移动",
                        province: "广东",
                        room: "广州双线２",
                        abbreviation: "GZ_DB2",
                        bandwidth: "10G",
                        flow:
                            "第一条1G (no latest data,no latest data)第二条1G (no latest data,no latest data)"
                    },
                    {
                        operators: "移动",
                        province: "广东",
                        room: "广州双线２",
                        abbreviation: "GZ_DB2",
                        bandwidth: "10G",
                        flow:
                            "第一条1G (no latest data,no latest data)第二条1G (no latest data,no latest data)"
                    },
                    {
                        operators: "移动",
                        province: "广东",
                        room: "广州双线２",
                        abbreviation: "GZ_DB2",
                        bandwidth: "10G",
                        flow:
                            "第一条1G (no latest data,no latest data)第二条1G (no latest data,no latest data)"
                    },
                ],
                tableobj: {},
                rowIndex: "-1",
                provinceArr: {},
                OrderIndexArr: [],
                column: [
                    {prop: 'operators', label: '运营商'},
                    {prop: 'province', label: '省份'},
                    {prop: 'room', label: '机房'},
                    {prop: 'abbreviation', label: '英文缩写'},
                ]
            };
        },
        methods: {
            resize() {
                this.tableH = this.$refs['table'].clientHeight
            },
            merge() {
                const list = ['operators', 'province']
                list.forEach(item=> {
                    let provinceObj = {};
                    this.tableData.forEach((element, index) => {
                        if (provinceObj[element[item]]) {
                            let nextPro = this.tableData[index + 1]
                                ? this.tableData[index + 1][item]
                                : undefined;
                            let prevPro = this.tableData[index - 1][item]
                                ? this.tableData[index - 1][item]
                                : undefined;
                            if (element[item] === nextPro) {
                                provinceObj[element[item]].push(index);
                            } else if (element[item] === prevPro) {
                                provinceObj[element[item]].push(index);
                            }
                        } else {
                            provinceObj[element[item]] = [];
                            provinceObj[element[item]].push(index);
                        }
                    });
                    // 先对相同元素进行删选，而后把相同元素的位置计算分组
                    // this.provinceArr.push(this.getCode(provinceObj))
                    this.provinceArr[item] = this.getCode(provinceObj)
                    console.dir(this.provinceArr)
                });
            },
            getCode(provinceObj) {
                let list = []
                for (let i in provinceObj) {
                    if (provinceObj[i].length > 1) {
                        list = list.concat(this.handleData(provinceObj[i]))
                    }
                }
                return list
            },
            handleData(data){
                let temp = data;
                let itemArr = [];
                let itemArrNew = [];
                let resArr = [];
                let list = []
                if (data.length>2) {
                    for (let i = 0; i < data.length; i++) {
                        if (data[i+1]) {
                            if (data[i+1] - data[i] > 1) {
                                itemArr = data.slice(0,i+1)
                                itemArrNew = temp.slice(i+1,temp.length)
                                break;
                            } else {
                                resArr = data
                            }
                        }
                    }
                    if (itemArr.length>0 || itemArrNew.length>0) {
                        list.push(itemArr)
                        list.push(itemArrNew)
                    }else{
                        list.push(data)
                    }
                }else{
                    list.push(data)
                }
                return list
            },
            objectSpanMethod({ row, rowIndex, column, columnIndex }) {
                const list = ['operators', 'province']
                if (list.indexOf(column.property) !== -1) {
                    if (columnIndex === Number(list.indexOf(column.property))) {
                        for (let j = 0; j < this.provinceArr[column.property].length; j++) {
                            let element = this.provinceArr[column.property][j];
                            for (let k = 0; k < element.length; k++) {
                                let item = element[k];
                                if (rowIndex === item) {
                                    // 判断是初始结点
                                    if (k === 0) {
                                        return {
                                            rowspan: element.length,
                                            colspan: 1
                                        };
                                    } else if (k !== 0) {
                                        return {
                                            rowspan: 0,
                                            colspan: 0
                                        };
                                    }
                                }
                            }
                        }
                    }
                }


                // console.dir(column)
                // console.dir(this.OrderIndexArr)
            }
        },
        created(){
            this.merge()
            // this.$nextTick(()=>{
            //     this.merge()
            // })
        }
    };
</script>