el-table表格动态合并行、合并行列及详解

本文详细介绍了如何使用Element UI的el-table组件实现数据行和列的合并,包括基本的行合并示例以及处理特殊情况如总成绩行的合并方法,适合前端开发者学习和实践表格数据处理。

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

📝 个人简介

⭐ 个人主页:我是段段🙋‍
🍊 博客领域:编程基础、前端💻
🍅 写作风格:干货!干货!都是干货!
🍑 精选专栏:Vue
🛸 支持段段:点赞👍、收藏⭐、留言💬

前言

在写项目的时候有时候会经常遇到把行和列合并起来的情况,因为有些数据是重复渲染的,不合并行列会使表格看起来非常的混乱,如下:
在这里插入图片描述

而我们想要的数据是下面这种情况,将重复的行进行合并,使表格看起来简单明了,如下:
在这里插入图片描述

1、合并行

所谓的合并行就是将多行相同的数据变成一行来显示,直接上代码,页面的布局比较简单

<template>
    <div class="table">
        <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%">
            <el-table-column prop="time" label="时间"></el-table-column>
            <el-table-column prop="grade" label="年级"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="subjects" label="科目"></el-table-column>
            <el-table-column prop="score" label="成绩"></el-table-column>
        </el-table>
    </div>
</template>

span-method是el-table上属性,其值是一个函数,objectSpanMethod方法是用来处理合并行的返回值,tableData数据如下:

tableData: [
    { time: '2020-08-10', grade: '三年二班', name: '小明', subjects: '语文', score: 80 },
    { time: '2020-08-10', grade: '三年二班', name: '小明', subjects: '数学', score: 80 }, 
    { time: '2020-08-10', grade: '三年一班', name: '小雷', subjects: '语文', score: 70 },
    { time: '2020-08-10', grade: '三年一班', name: '小雷', subjects: '数学', score: 80 },
    { time: '2020-08-11', grade: '三年三班', name: '小花', subjects: '语文', score: 60 }, 
    { time: '2020-08-11', grade: '三年三班', name: '小花', subjects: '数学', score: 60 }, 
],
mergeObj: {}, // 用来记录需要合并行的下标
mergeArr: ['time', 'grade', 'name', 'subjects', 'score'] // 表格中的列名

首先需要对数据就行处理,就是比较当前行与上一行的值是否相等(如果是第一行数据,直接将值赋值为1)

mounted中调用数据初始化数据的方法,如下:

mounted() {
    this.getSpanArr(this.tableData);
}
// getSpanArr方法
getSpanArr(data) {
    this.mergeArr.forEach((key, index1) => {
        let count = 0; // 用来记录需要合并行的起始位置
        this.mergeObj[key] = []; // 记录每一列的合并信息
        data.forEach((item, index) => {
            // index == 0表示数据为第一行,直接 push 一个 1
            if(index === 0) {
                this.mergeObj[key].push(1); 
            } else {
                // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
                if(item[key] === data[index - 1][key]) { 
                    this.mergeObj[key][count] += 1;
                    this.mergeObj[key].push(0);
                } else {
                    // 如果当前行和上一行其值不相等 
                    count = index; // 记录当前位置 
                    this.mergeObj[key].push(1); // 重新push 一个 1
                }
            }
        })
    })
}

数据处理好之后就可以调用objectSpanMethod方法了,如下:

// objectSpanMethod方法
// 默认接受四个值 { 当前行的值, 当前列的值, 行的下标, 列的下标 }
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    // 判断列的属性
    if(this.mergeArr.indexOf(column.property) !== -1) { 
        // 判断其值是不是为0 
        if(this.mergeObj[column.property][rowIndex]) { 
            return [this.mergeObj[column.property][rowIndex], 1]
        } else {
            // 如果为0则为需要合并的行
            return [0, 0]; 
        }
    }
}

合并后的结果就是我们想要的形式:
在这里插入图片描述
合并行完整的代码如下:

<template>
    <div class="table">
        <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%">
            <el-table-column prop="time" label="时间"></el-table-column>
            <el-table-column prop="grade" label="年级"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="subjects" label="科目"></el-table-column>
            <el-table-column prop="score" label="成绩"></el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    name: 'Table',
    data() {
        return {
            tableData: [
                { time: '2020-08-10', grade: '三年二班', name: '小明', subjects: '语文', score: 80 },
                { time: '2020-08-10', grade: '三年二班', name: '小明', subjects: '数学', score: 80 },
                { time: '2020-08-10', grade: '三年一班', name: '小雷', subjects: '语文', score: 70 },
                { time: '2020-08-10', grade: '三年一班', name: '小雷', subjects: '数学', score: 80 },
                { time: '2020-08-11', grade: '三年三班', name: '小花', subjects: '语文', score: 60 }, 
                { time: '2020-08-11', grade: '三年三班', name: '小花', subjects: '数学', score: 60 }, 

            ],
            mergeObj: {},
            mergeArr: ['time', 'grade', 'name', 'subjects', 'score'],
        };
    },
    methods: {
        getSpanArr(data) {
            this.mergeArr.forEach((key, index1) => {
                let count = 0; // 用来记录需要合并行的起始位置
                this.mergeObj[key] = []; // 记录每一列的合并信息
                data.forEach((item, index) => {
                    // index == 0表示数据为第一行,直接 push 一个 1
                    if(index === 0) {
                        this.mergeObj[key].push(1); 
                    } else {
                        // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
                        if(item[key] === data[index - 1][key]) { 
                            this.mergeObj[key][count] += 1;
                            this.mergeObj[key].push(0);
                        } else {
                            // 如果当前行和上一行其值不相等 
                            count = index; // 记录当前位置 
                            this.mergeObj[key].push(1); // 重新push 一个 1
                        }
                    }
                })
            })
        },
        // 默认接受四个值 { 当前行的值, 当前列的值, 行的下标, 列的下标 }
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            // 判断列的属性
            if(this.mergeArr.indexOf(column.property) !== -1) { 
                // 判断其值是不是为0 
                if(this.mergeObj[column.property][rowIndex]) { 
                    return [this.mergeObj[column.property][rowIndex], 1]
                } else {
                    // 如果为0则为需要合并的行
                    return [0, 0]; 
                }
            }
        }
    },
    mounted() {
        this.getSpanArr(this.tableData);
    }
};
</script>

<style lang="stylus" scoped>
.table 
    height 100vh
    width 100%
    padding 40px
    box-sizing border-box
    /deep/ .el-table__body tr:hover > td
        background-color: #fff;
</style>

2、合并行列

调整下数据,如下:

tableData: [
    { time: '2020-08-10', grade: '三年二班', name: '小明', subjects: '语文', score: 80 },
    { time: '2020-08-10', grade: '三年二班', name: '小明', subjects: '数学', score: 80 }, 
    { time: '2020-08-10', grade: '总成绩', name: '总成绩', subjects: '总成绩', score: 160 },
    { time: '2020-08-10', grade: '三年一班', name: '小雷', subjects: '语文', score: 70 },
    { time: '2020-08-10', grade: '三年一班', name: '小雷', subjects: '数学', score: 80 },
    { time: '2020-08-10', grade: '总成绩', name: '总成绩', subjects: '总成绩', score: 150 }, 
    { time: '2020-08-11', grade: '三年三班', name: '小花', subjects: '语文', score: 60 }, 
    { time: '2020-08-11', grade: '三年三班', name: '小花', subjects: '数学', score: 60 }, 
    { time: '2020-08-11', grade: '总成绩', name: '总成绩', subjects: '总成绩', score: 120 }
],

可以看到上面的数据多了一行总成绩,现在的数据在页面显示效果如下:

在这里插入图片描述

可以看到总成绩的三个列并没有合并,并不是我们想要的效果,所以需要换一种思路来处理数据

页面的布局也有所调整,如下:

<template>
    <div class="table">
        <el-table :data="tableData" :span-method="objectSpanMethods" border style="width: 100%">
            <template v-for="cols in colConfigs">
                <!-- 无需合并的列 -->
                <el-table-column
                    v-if="cols.type === 'label' && !cols.children"
                    :key="cols.prop"
                    :prop="cols.prop"
                    :label="cols.label"
                >
                </el-table-column>
                <!-- 需要合并的列 -->
                <template v-else-if="cols.type === 'label' && cols.children">
                    <el-table-column
                        v-for="children in cols.children"
                        :key="children.prop"
                        :prop="children.prop"
                        :label="children.label"
                    />
                </template>
            </template>
        </el-table>
    </div>
</template>

tableData中的数据就是上面调整后的,还需要声明的变量如下:

// 表格的信息 需要合并的需要放在 children 中
colConfigs: [
    {
        type: 'label',
        children: [
            { prop: 'time', label: '时间' },
            { prop: 'grade', label: '年级' },
            { prop: 'name', label: '姓名' },
            { prop: 'subjects', label: '科目' },
            { prop: 'score', label: '成绩' }
        ]
    }
],
// 需要合并的行列信息
mergeCols: [
    { index: 0, name: 'time' },
    { index: 1, name: 'grade' },
    { index: 2, name: 'name' },
    { index: 3, name: 'subjects' },
    { index: 4, name: 'score' },
],
// 用来记录每一个单元格的下标
tableMergeIndex: [],

首先也需要处理数据,在mounted中调用数据初始化数据的方法,如下:

mounted() {
    if(this.mergeCols.length > 0) {
        this.newTableMergeData();
    }
}
// newTableMergeData方法
newTableMergeData() {
    for (let i = 0; i < this.tableData.length; i++) {
        for (let j = 0; j < this.mergeCols.length; j++) {
            // 初始化行、列坐标信息
            let rowIndex = 1;
            let columnIndex = 1;
            // 比较横坐标左方的第一个元素
            if (j > 0 && this.tableData[i][this.mergeCols[j]['name']] === this.tableData[i][this.mergeCols[j - 1]['name']]) {
                columnIndex = 0;
            }
            // 比较纵坐标上方的第一个元素
            if (i > 0 && this.tableData[i][this.mergeCols[j]['name']] === this.tableData[i - 1][this.mergeCols[j]['name']]) {
                rowIndex = 0;
            }
            // 比较横坐标右方元素
            if (columnIndex > 0) {
                columnIndex = this.onColIndex(this.tableData[i], j, j + 1, 1, this.mergeCols.length);
            }
            // 比较纵坐标下方元素
            if (rowIndex > 0) {
                rowIndex = this.onRowIndex(this.tableData, i, i + 1, 1, this.mergeCols[j]['name']);
            }
            let key = this.mergeCols[j]['index'] + '_' + i;
            this.tableMergeIndex[key] = [rowIndex, columnIndex];
        }
    }
},
/**
  * 计算列坐标信息
  * data 单元格所在行数据
  * index 当前下标
  * nextIndex 下一个元素坐标
  * count 相同内容的数量
  * maxLength 当前行的列总数
  */
onColIndex(data, index, nextIndex, count, maxLength) {
    // 比较当前单元格中的数据与同一行之后的单元格是否相同
    if (nextIndex < maxLength && data[this.mergeCols[index]['name']] === data[this.mergeCols[nextIndex]['name']]) {
        return this.onColIndex(data, index, ++nextIndex, ++count, maxLength);
    }
    return count;
},
/**
  * 计算行坐标信息
  * data 表格总数据
  * index 当前下标
  * nextIndex 下一个元素坐标
  * count 相同内容的数量
  * name 数据的key
  */
onRowIndex(data, index, nextIndex, count, name) {
    // 比较当前单元格中的数据与同一列之后的单元格是否相同
    if (nextIndex < data.length && data[index][name] === data[nextIndex][name]) {
        return this.onRowIndex(data, index, ++nextIndex, ++count, name);
    }
    return count;
}

数据处理好之后就可以调用objectSpanMethods方法了,如下:

objectSpanMethods({ row, column, rowIndex, columnIndex }) {
    let key = columnIndex + '_' + rowIndex;
    if (this.tableMergeIndex[key]) {
        return this.tableMergeIndex[key];
    }
}

实现的效果图如下:

在这里插入图片描述
合并行列的完整代码如下:

<template>
    <div class="table">
        <el-table :data="tableData" :span-method="objectSpanMethods" border style="width: 100%">
            <template v-for="cols in colConfigs">
                <!-- 无需合并的列 -->
                <el-table-column
                    v-if="cols.type === 'label' && !cols.children"
                    :key="cols.prop"
                    :prop="cols.prop"
                    :label="cols.label"
                >
                </el-table-column>
                <!-- 需要合并的列 -->
                <template v-else-if="cols.type === 'label' && cols.children">
                    <el-table-column
                        v-for="children in cols.children"
                        :key="children.prop"
                        :prop="children.prop"
                        :label="children.label"
                    />
                </template>
            </template>
        </el-table>
    </div>
</template>

<script>
export default {
    name: 'Table',
    data() {
        return {
            tableData: [
                { time: '2020-08-10', grade: '三年二班', name: '小明', subjects: '语文', score: 80 },
                { time: '2020-08-10', grade: '三年二班', name: '小明', subjects: '数学', score: 80 }, 
                { time: '2020-08-10', grade: '总成绩', name: '总成绩', subjects: '总成绩', score: 160 },
                { time: '2020-08-10', grade: '三年一班', name: '小雷', subjects: '语文', score: 70 },
                { time: '2020-08-10', grade: '三年一班', name: '小雷', subjects: '数学', score: 80 },
                { time: '2020-08-10', grade: '总成绩', name: '总成绩', subjects: '总成绩', score: 150 }, 
                { time: '2020-08-11', grade: '三年三班', name: '小花', subjects: '语文', score: 60 }, 
                { time: '2020-08-11', grade: '三年三班', name: '小花', subjects: '数学', score: 60 }, 
                { time: '2020-08-11', grade: '总成绩', name: '总成绩', subjects: '总成绩', score: 120 }
            ],
            // 表格的信息 需要合并的需要放在 children 中
            colConfigs: [
                {
                    type: 'label',
                    children: [
                        { prop: 'time', label: '时间' },
                        { prop: 'grade', label: '年级' },
                        { prop: 'name', label: '姓名' },
                        { prop: 'subjects', label: '科目' },
                        { prop: 'score', label: '成绩' }
                    ]
                },
                // { type: 'label', prop: 'age', label: '年龄' }
            ],
            // 需要合并的行列信息 index必须是table表格对应的下标 不能随意修改
            mergeCols: [
                { index: 0, name: 'time' },
                { index: 1, name: 'grade' },
                { index: 2, name: 'name' },
                { index: 3, name: 'subjects' },
                { index: 4, name: 'score' },
                // { index: 5, name: 'age' }
            ],
            // 用来记录每一个单元格的下标
            tableMergeIndex: [],
        };
    },
    methods: {
        objectSpanMethods({ row, column, rowIndex, columnIndex }) {
            let key = columnIndex + '_' + rowIndex;
            if (this.tableMergeIndex[key]) {
                return this.tableMergeIndex[key];
            }
        },
        newTableMergeData() {
            for (let i = 0; i < this.tableData.length; i++) {
                for (let j = 0; j < this.mergeCols.length; j++) {
                    // 初始化行、列坐标信息
                    let rowIndex = 1;
                    let columnIndex = 1;
                    // 比较横坐标左方的第一个元素
                    if (j > 0 && this.tableData[i][this.mergeCols[j]['name']] === this.tableData[i][this.mergeCols[j - 1]['name']]) {
                        columnIndex = 0;
                    }
                    // 比较纵坐标上方的第一个元素
                    if (i > 0 && this.tableData[i][this.mergeCols[j]['name']] === this.tableData[i - 1][this.mergeCols[j]['name']]) {
                        rowIndex = 0;
                    }
                    // 比较横坐标右方元素
                    if (columnIndex > 0) {
                        columnIndex = this.onColIndex(this.tableData[i], j, j + 1, 1, this.mergeCols.length);
                    }
                    // 比较纵坐标下方元素
                    if (rowIndex > 0) {
                        rowIndex = this.onRowIndex(this.tableData, i, i + 1, 1, this.mergeCols[j]['name']);
                    }
                    let key = this.mergeCols[j]['index'] + '_' + i;
                    this.tableMergeIndex[key] = [rowIndex, columnIndex];
                }
            }
        },
        /**
         * 计算列坐标信息
         * data 单元格所在行数据
         * index 当前下标
         * nextIndex 下一个元素坐标
         * count 相同内容的数量
         * maxLength 当前行的列总数
         */
        onColIndex(data, index, nextIndex, count, maxLength) {
            // 比较当前单元格中的数据与同一行之后的单元格是否相同
            if (nextIndex < maxLength && data[this.mergeCols[index]['name']] === data[this.mergeCols[nextIndex]['name']]) {
                return this.onColIndex(data, index, ++nextIndex, ++count, maxLength);
            }
            return count;
        },
        /**
         * 计算行坐标信息
         * data 表格总数据
         * index 当前下标
         * nextIndex 下一个元素坐标
         * count 相同内容的数量
         * name 数据的key
         */
        onRowIndex(data, index, nextIndex, count, name) {
            // 比较当前单元格中的数据与同一列之后的单元格是否相同
            if (nextIndex < data.length && data[index][name] === data[nextIndex][name]) {
                return this.onRowIndex(data, index, ++nextIndex, ++count, name);
            }
            return count;
        }
    },
    mounted() {
        if(this.mergeCols.length > 0) {
            this.newTableMergeData();
        }
    }
};
</script>

<style lang="stylus" scoped>
.table 
    height 100vh
    width 100%
    padding 40px
    box-sizing border-box
    /deep/ .el-table__body tr:hover > td
        background-color: #fff;
</style>

如果用不想合并的行需要在colConfigs中调整,如下:

// 增加一个年龄属性 但是不进行合并
colConfigs: [
    {
        type: 'label',
        children: [
            { prop: 'time', label: '时间' },
            { prop: 'grade', label: '年级' },
            { prop: 'name', label: '姓名' },
            { prop: 'subjects', label: '科目' },
            { prop: 'score', label: '成绩' }
        ]
    },
    { type: 'label', prop: 'age', label: '年龄' }
]

效果图如下:

在这里插入图片描述
如果想要合并,需要在mergeCols中添加数据,如下:

mergeCols: [
    { index: 0, name: 'time' },
    { index: 1, name: 'grade' },
    { index: 2, name: 'name' },
    { index: 3, name: 'subjects' },
    { index: 4, name: 'score' },
    { index: 5, name: 'age' } // 添加需要合并的age列信息 注意index的值
],

新添加的属性合并后效果图如下:
在这里插入图片描述
以上就是el-table表格合并行列的内容,有不懂的地方欢迎留言讨论~

### 如何在 Element UI 的 `el-table` 组件中实现动态合并列 #### 背景介绍 Element UI 提供了一个强大的表格组件 `el-table`,它允许开发者通过设置特定的属性来控制表格为和外观。为了实现动态合并列的功能,可以利用 `span-method` 属性[^3]。 此属性接受一个函数作为参数,该函数定义了单元格跨或跨列的方式。通过逻辑判断,可以在运时决定哪些单元格应该被合并--- #### 实现方法 以下是基于官方文档以及社区实践总结的一个完整的解决方案: 1. **数据准备** 假设我们有一组数据需要展示在一个表格中,并且某些列可能需要根据业务逻辑进动态合并。例如,如果两的数据相同,则它们对应的某一列会被合并。 2. **HTML 结构** 使用 `el-table` 和其子组件 `el-table-column` 来构建表格结构。同时,在 `el-table` 上绑定 `span-method` 属性以启用自定义合并为。 ```html <template> <div> <el-table :data="tableData" border style="width: 100%" :span-method="objectSpanMethod"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> ``` 3. **JavaScript 方法** 在 Vue.js 中编写逻辑代码,用于处理动态合并的需求。这里的关键在于 `objectSpanMethod` 函数的设计。 ```javascript <script> export default { data() { return { tableData: [ { date: "2023-09-01", name: "张三", address: "北京市朝阳区" }, { date: "2023-09-01", name: "李四", address: "上海市浦东新区" }, { date: "2023-09-02", name: "王五", address: "广州市天河区" } ], spanArr: [], // 存储每一列的合并信息 pos: 0 // 当前位置索引 }; }, methods: { objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { // 对于第 0 列(即“日期”) const _row = this.spanArr[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col }; // 返回跨数和跨列数 } else { return {}; // 不需合并的情况返回默认对象 } }, handleMerge(data) { this.spanArr = []; for (let i = 0; i < data.length; i++) { if (i === 0 || data[i].date !== data[i - 1].date) { this.spanArr.push(1); // 如果当前项与上一项不同,则初始化为 1 this.pos = 0; // 记录当前位置 } else { this.spanArr[this.pos] += 1; // 合并计数加一 this.spanArr.push(0); // 设置后续项为 0 表示已合并 } } } }, mounted() { this.handleMerge(this.tableData); } }; </script> ``` 4. **样式调整** 可以为表格添加额外的 CSS 样式以优化视觉效果。例如,增加边框或者背景颜色区分不同的区域。 ```css <style scoped> .el-table td, .el-table th.is-leaf { border-bottom: none !important; } </style> ``` --- #### 关键点解析 - **`span-method` 属性的作用** 此属性接收一个回调函数,用来计算每每列的跨 (`rowspan`) 或者跨列 (`colspan`) 数量。当某个单元格设置了非零的 `rowspan` 或 `colspan` 时,相邻的单元格会自动隐藏。 - **动态计算合并规则** 在实际应用中,通常需要遍历整个数据集,找到连续相同的字段值,并记录这些字段应占据多少。上述例子中的 `handleMerge` 方法正是完成这一任务的核心部分[^2]。 - **性能考虑** 大规模数据场景下需要注意性能调优。对于非常大的表格,建议分页加载数据或将复杂运算移至服务端执[^4]。 --- #### 总结 以上展示了如何借助 `span-method` 属性在 Element UI 的 `el-table` 组件中实现动态合并功能。这种方法不仅简单易懂,而且灵活性高,能够满足大多数常见的业务需求。 ---
评论 22
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我是段段

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值