vue element-ui合并el-table表格

<template>
    <el-table :data="data" border style="width:100%" :cell-style="cellStyle" :span-method="arraySpanMethod"
        :header-cell-style="handerMethod">
        <template v-for="(item, index) in header">
            <el-table-column :label="item.text" :key="index" align="center">
                <template #default="{ row }">
                    {{ row[index] }}
                    <div v-for="(item1, index1) in row.url" :key="index1">
                        <el-image v-if="index == index1 + 2 && !row[index]" :src="item1"></el-image>
                    </div>
                </template>
            </el-table-column>
        </template>
    </el-table>
</template>

<script>
export default {
    data() {
        return {
            header: [
                { text: 'name' },
                { text: 'name' },
                { text: '200' },
                { text: '200' },
                { text: '300' },
                { text: '300' },
                { text: '300' },
                { text: '400' },
            ],
            tableData: [
                {
                    0: '张三',
                    1: '',
                    2: 'abc',
                    3: 'dcs',
                    4: 'dsa',
                    5: 'bgs',
                    6: 'ngh',
                    7: 'mhj'
                },
                {
                    0: '李四',
                    1: '',
                    2: '123',
                    3: '789',
                    4: 'bgs',
                    5: 'bgs',
                    6: 'ngh',
                    7: 'mhj'
                },
                {
                    0: '王五',
                    1: '',
                    2: '789',
                    3: '789',
                    4: '789',
                    5: 'bgs',
                    6: 'ngh',
                    7: 'mhj'
                },
                {
                    0: '赵六',
                    1: '小六',
                    2: '478',
                    3: '534',
                    4: 'bgs',
                    5: 'bgs',
                    6: 'bgs',
                    7: 'bgs'
                },
                {
                    0: '赵六',
                    1: '小七',
                    2: '098',
                    3: '560',
                    4: 'dsa',
                    5: '098',
                    6: '098',
                    7: '098'
                },
                {
                    0: '宋七',
                    1: '小八',
                    2: '309',
                    3: '309',
                    4: 'dsa',
                    5: '309',
                    6: '309',
                    7: '309'
                },
                {
                    0: '宋七',
                    1: '小九',
                    2: '610',
                    3: '208',
                    // 4: 'dsa',
                    // 5: 'bgs',
                    // 6: 'ngh',
                    // 7: 'mhj'
                },
                {
                    0: 'image',
                    1: 'test',
                    url: ['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
                        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
                        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
                        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
                        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
                        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg']
                },
                {
                    0: 'ima',
                    1: '',
                    url: ['https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg']
                }
            ],
            data: []
        }
    },
    created() {
        this.caculateHeaderColSpan();
        this.dealTableData(this.tableData)
    },
    methods: {
        // 添加颜色
        cellStyle({ row, column, rowIndex, columnIndex }) {
            switch (rowIndex) {
                case this.tableData.length - 3:
                    if (row[columnIndex] > 600) {
                        return 'backgroundColor:#CCFF00'
                    }
                    break;
                case this.tableData.length - 4:
                    if (row[columnIndex] > 600) {
                        return 'backgroundColor:pink'
                    }
                    break;
            }
        },
        // 处理数据，便于行合并
        flitterData() {
            let rowSpanArr = [];
            let concatIndex = 1;
            this.tableData.forEach((item, index) => {
                if (index === 0) {
                    rowSpanArr.push(1);
                } else {
                    if (item[0] === this.tableData[index - 1][0]) {
                        rowSpanArr[concatIndex] += 1;
                        rowSpanArr.push(0);
                    } else {
                        rowSpanArr.push(1);
                        concatIndex = index
                    }
                }
            });
            return {
                one: rowSpanArr
            }
        },
        dealTableData(data) {
            const twoArr = data.reduce((acc, obj) => {
                const values = Object.values(obj);
                const uniqueValues = values.reduce((acc, val, index, arr) => {
                    if (val !== arr[index - 1]) {
                        acc.push(val)
                    }
                    return acc
                }, []);
                acc.push(uniqueValues);
                return acc;
            }, []);
            const result1 = twoArr.map((subArr) => {
                const obj = {};
                subArr.forEach((value, index) => {
                    if (typeof value === 'object' && !Array.isArray(value)) {
                        Object.assign(obj, value)
                    } else if (Array.isArray(value)) {
                        obj.url = value
                    }else{
                        obj[index]=value
                    }
                })
                return obj;
            })
            this.data = result1
            console.log(this.data);
        },
        dealRowData(num) {
            const result = this.tableData.map((obj) => Object.values(obj));
            const newArr = [];
            result.forEach(arr => newArr.push(arr));
            for (let i = 0; i < newArr.length; i++) {
                let subArr = newArr[num];
                let countArr = [];
                let count = 1;
                for (let j = 1; j < subArr.length; j++) {
                    if (subArr[j] === subArr[j - 1]) {
                        count++
                    } else {
                        countArr.push(count);
                        count = 1
                    }
                }
                countArr.push(count)
                return countArr
            }
        },
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            // 合并列
            if (row[1] == '') {
                if (columnIndex === 0) {
                    return [1, 2]
                } else if (columnIndex === 1) {
                    return [0, 0]
                }
            };
            if (rowIndex == this.header.length) {
                if (columnIndex === 2) {
                    return [1, 100]
                }
            }
            // 合并行
            if (columnIndex === 0) {
                const _row = this.flitterData(this.tableData).one[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col,
                }
            }
            // 合并单元格相同的内容
            const merge = (num, columnIndex) => {
                if (rowIndex == num) {
                    const _col = this.dealRowData(num)[columnIndex];
                    const _row = _col > 0 ? 1 : 0;
                    return [_row, _col]
                }
            };
            if (rowIndex < this.tableData.length - 3) {
                return merge(rowIndex, columnIndex)
            }
            if (rowIndex == this.tableData.length - 3) {
                if (columnIndex>1) {
                    return [1,3]
                }
            }
        },
        // 表头初始化数据及合并表头计算
        caculateHeaderColSpan() {
            this.header.forEach((ele) => {
                ele.colSpan = 1
            })
            for (let i = 0; i < this.header.length - 1; i++) {
                for (let j = i + 1; j < this.header.length; j++) {
                    if (this.header[i].text === this.header[j].text) {
                        this.header[i].colSpan++;
                        this.header[j].colSpan = 0;
                    } else {
                        // 跳过已经重复的数据
                        i += this.header[i].colSpan - 1;
                        break;
                    }
                    // 循环到最后，停止循环
                    if (j === this.header.length - 1) {
                        i = j;
                    }
                }
            }
        },
        //    表头合并控制
        handerMethod({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                if (columnIndex >= 0) {
                    this.$nextTick(() => {
                        if (document.getElementsByClassName(column.id).length !== 0) {
                            document
                                .getElementsByClassName(column.id)[0]
                                .setAttribute('colSpan', this.header[columnIndex].colSpan);
                        }
                    });
                    // 被合并的列隐藏
                    if (this.header[columnIndex].colSpan === 0) {
                        return { display: 'none', textAlign: 'center' };
                    }
                }
            }
        },
    }
}
</script>

<style></style>