vue使用el-table动态合并列及行

最新推荐文章于 2024-07-03 18:35:16 发布

原创

最新推荐文章于 2024-07-03 18:35:16 发布 · 2.3k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文记录了在Vue项目中使用element-ui的el-table组件进行动态行列合并的方法。通过处理数据并利用objectSpanMethod方法，实现了复杂表格的合并需求。需要注意数据排序以及columnIndex的设置，以确保页面效果正确。

前两天项目中需要用到表单合并，特此记录，放便以后使用。

首先我使用的element-ui中的el-table，文档中提供span-method方法可以实现合并行或列，大家不熟悉的可以去看看element文档地址，但是文档提供的例子很简单，不能满足复杂的页面，所以需要处理一下数据。

如下代码：

getListDataForRowAndColumn(data){
            let self = this;
            self.rowAndColumn = [];
            self.rowRoomColumn = [];
            for (var i = 0; i < data.length; i++) {
                if (i === 0) {
                    // 如果是第一条记录（即索引是0的时候），向数组中加入１
                    self.rowAndColumn.push(1);
                    self.pos = 0;
                    self.rowRoomColumn.push(1);
                    self.posT = 0;
                } else {
                    //data[i].typeDesc就是你从接口读取的字段信息，下同
                    if (data[i].typeDesc === data[i - 1].typeDesc) {
                        // 如果typeDesc相等就累加，并且push 0