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

  1. 官方–方法

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

  1. 全场最佳–方法

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;
        }
    }
  1. 不知道是谁的–方法

若要实现下图所示结果,下面展示方法。在这里插入图片描述


    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;
            }
        }

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

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐