【Vue+el-element】表格相同数据合并单元格

博客第二天纪念日—被表格玩的一天开始了(꒦_꒦)
今天挑战表格相同数据合并单元格，其他列不同数据添加到一行显示

1. 官方–方法

element中有表格合并的方法：
通过给table传入span-method方法可以实现合并行或列。详见链接: element表格.

2. 全场最佳–方法

but我们今天要用到的是另一种处理数据的方法：将拿到的table数据循环两次，判断第一次循环拿到的name和第二次循环拿到的name是否相等，如果相等，将当前循环到的其他字段的数据添加到对应数据的后面，并显示出数据。最后整张表进行去重操作。如图所示：贴出代码，仅供参考

下面展示一些 内联代码片。

    data() {
        return {
            tableData: [
                {
                    name: '虎子',
                    sort: '数学：66'
                },
                {
                    name: '虎子',
                    sort: '语文：66'
                },
                {
                    name: '虎子',
                    sort: '英语：66'
                },
                {
                    name: '胖丫',
                    sort: '历史：99'
                },
                {
                    name: '胖丫',
                    sort: '地理：99'
                },
                {
                    name: '翠花',
                    sort: '物理：10'
                },
                {
                    name: '铁柱',
                    sort: '化学：20'
                },
                {
                    name: '旺财',
                    sort: '生物：30'
                },
                {
                    name: '旺财',
                    sort: '数学：40'
                }
            ]
        };
    },
    created() {
        this.setrowspans();
    },
    methods: {
        setrowspans() {
            let resData = JSON.parse(JSON.stringify(this.tableData));
            for (let i = 0; i < resData.length; i ++) {
                const v1 = resData[i];
                for (let j = 0; j < this.tableData.length; j ++) {
                    const v2 = this.tableData[j];
                    // 拿第一次循环的name和第二次循环的name 对比，若相同并且sort不同
                    if ((v1.name === v2.name)
                                && v1.sort !== v2.sort) {
                        // 让v1的sort追加成v1,v2形式
                        let str = JSON.parse(JSON.stringify(`${v1.sort},${v2.sort}`));
                        v1.sort = str;
                    }
                }
            }
            // 根据name去除，优先显示前面的索引
            resData = resData.filter((item, index, self) =>
                index === self.findIndex((t) =>
                    (t.name === item.name)
                ));
            this.tableData = resData;
        }
    }

3. 不知道是谁的–方法

若要实现下图所示结果，下面展示方法。

    created() {
        this.setrowspans();
    },
    methods: {
        // eslint-disable-next-line no-unused-vars
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                return {
                    rowspan: row.rowspan,
                    colspan: 1
                };
            }
        },
        setrowspans() {
            this.tableData.forEach((v) => {
                v.rowspan = 1;
            });
            for (let i = 0; i < this.tableData.length; i ++) {
                for (let j = i + 1; j < this.tableData.length; j ++) {
                    if (this.tableData[i].name === this.tableData[j].name) {
                        this.tableData[i].rowspan ++;
                        this.tableData[j].rowspan --;
                    }
                }
                // 跳过重复的数据
                i = i + this.tableData[i].rowspan - 1;
            }
        }

详情参考文章链接: 合并表格相同数据.