el-table自定义合并列

最新推荐文章于 2025-07-07 09:56:50 发布

转载最新推荐文章于 2025-07-07 09:56:50 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.csdn.net/xiongdaandxiaomi/article/details/107505901

vue 同时被 3 个专栏收录

25 篇文章

订阅专栏

elementUI

9 篇文章

订阅专栏

算法逻辑题--数据处理

6 篇文章

订阅专栏

本文介绍了一种使用Vue.js实现的表格数据展示方法，通过自定义的合并行算法，实现了对相同承建单位的数据进行合并显示，减少视觉冗余，提高表格阅读效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div>
        <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
            <el-table-column prop="a" label="获奖年份"></el-table-column>
            <el-table-column prop="b" label="工程名称"></el-table-column>
            <el-table-column prop="c" label="承建单位"></el-table-column>
            <el-table-column prop="d" label="参建单位"></el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
                { a: 2021, b: '工程', c: '承建', d: '参建1' },
                { a: 2021, b: '工程', c: '承建', d: '参建2' },
                { a: 2021, b: '工程', c: '承建', d: '参建3' },
                { a: 2021, b: '工程', c: '承建1', d: '参建3' },
                { a: 2021, b: '工程', c: '承建1', d: '参建3' },
                { a: 2021, b: '工程1', c: '承建1', d: '参建3' },
            ]
        };
    },
    watch: {
        tableData: {
            handler() {
                this.getSpanArr(this.tableData)
            },
            immediate: true
        }
    },
    methods: {
        //合并行
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            // columnIndex === xx 找到第xx列，实现合并随机出现的行数
            if (columnIndex === 2) {
                const _row = this.spanArr[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                console.log(row, column, rowIndex, columnIndex)
                return {
                    rowspan: _row,
                    colspan: _col
                }
            }
        },
        // 因为要合并的行数是不固定的，此函数是实现合并随意行数的功能
        getSpanArr(data) {
            this.spanArr = [];
            this.pos = 0;
            for (var i = 0; i < data.length; i++) {
                if (i === 0) {
                    // 如果是第一条记录（即索引是0的时候），向数组中加入1
                    this.spanArr.push(1);
                    this.pos = 0;
                } else {
                    if (data[i].c === data[i - 1].c) {
                        // 如果c相等就累加，并且push 0
                        this.spanArr[this.pos] += 1;
                        this.spanArr.push(0);
                    } else {
                        // 不相等push 1
                        this.spanArr.push(1);
                        this.pos = i;
                    }
                }
            }
        },
    }
};
</script>