el-table合并行

最新推荐文章于 2024-04-16 15:26:53 发布

weixin_44440116

最新推荐文章于 2024-04-16 15:26:53 发布

阅读量4.2k

点赞数 2

分类专栏： element-ui vue 前端文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_44440116/article/details/109853129

版权

vue 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

前端

14 篇文章 0 订阅

订阅专栏

element-ui

8 篇文章 0 订阅

订阅专栏

实现方法：
el-table官方提供span-method合并行的计算方法，可以实现行或者列的合并，这里主要提供了行合并的方法，设置需要合并的列数组，判断同一列下该行和上一行数据是否相同，执行相应的操作。

效果图：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
        <title>el-table行合并</title>
    </head>
    <body>
        <div id="app">
            <el-table :span-method="arraySpanMethod" :data="tableData" border style="width: 1000px">
                <el-table-column prop="id" label="id" width="180"> </el-table-column>
                <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>
        <!-- 引入vue -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!-- 引入样式 -->
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <!-- 引入组件库 -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    tableData: [
                        { id: 1, date: '2016-05-02', name: '王小龙', address: '上海市普陀区金沙江路 1 弄' },
                        { id: 2, date: '2016-05-02', name: '王小龙', address: '上海市普陀区金沙江路 2 弄' },
                        { id: 3, date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 3 弄' },
                        { id: 4, date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 5 弄' },
                        { id: 5, date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 5 弄' },
                        { id: 6, date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 4 弄' },
                    ],
                    mergeObj: {},
                    mergeArr: ['date', 'name', 'address'],
                },
                mounted() {
                    this.rowspan()
                },
                methods: {
                    rowspan() {
                        for (let key of this.mergeArr) {
                            let count = 0
                            this.mergeObj[key] = []
                            this.tableData.forEach((item, index) => {
                                if (index === 0) {
                                    this.mergeObj[key].push(1)
                                } else {
                                    if (item[key] === this.tableData[index - 1][key]) {
                                        this.mergeObj[key][count] += 1
                                        this.mergeObj[key].push(0)
                                    } else {
                                        count = index
                                        this.mergeObj[key].push(1)
                                    }
                                }
                            })
                        }
                    },
                    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
                        if (this.mergeArr.indexOf(column.property) !== -1) {
                            if (this.mergeObj[column.property][rowIndex]) {
                                return {
                                    rowspan: this.mergeObj[column.property][rowIndex],
                                    colspan: 1,
                                }
                            } else {
                                return {
                                    rowspan: 0,
                                    colspan: 0,
                                }
                            }
                        } else {
                            return {
                                rowspan: 1,
                                colspan: 1,
                            }
                        }
                    },
                },
            })
        </script>
    </body>
</html>

weixin_44440116

关注

2
点赞
踩
19

收藏

觉得还不错? 一键收藏
4
评论
el-table合并行

实现方法：el-table官方提供span-method合并行的计算方法，可以实现行或者列的合并，这里主要提供了行合并的方法，设置需要合并的列数组，判断同一列下该行和上一行数据是否相同，执行相应的操作。效果图：代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="
复制链接

扫一扫