element table表格合并行列思路

最新推荐文章于 2025-06-28 09:29:44 发布

小道士在路上

最新推荐文章于 2025-06-28 09:29:44 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/qq_39917399/article/details/117818388

js 同时被 3 个专栏收录

10 篇文章

订阅专栏

vue

10 篇文章

订阅专栏

element-ui

4 篇文章

订阅专栏

本文详细介绍了如何在Vue.js的Element UI组件库中，利用el-table的span-method属性进行表格行或列的合并。首先，需要在el-table标签添加span-method属性，并传入一个方法arraySpanMethod。然后，通过dealData函数预先处理tableData，计算每个行的rowspan属性。在arraySpanMethod方法中，根据预处理后的rowspan返回合并信息。对于列合并，思路与行合并类似，需要根据具体需求进行调整。这种方法使得在复杂表格布局中能够更灵活地控制单元格的合并。

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

对el-table进行合并行或列需要在el-table标签添加合并方法 span-method。

<el-table  :data="tableData"  :span-method="arraySpanMethod"></el-table>

查看官方的合并方法arraySpanMethod的实现

arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }

方法参数为每行的行内数据，也就是tabledata数组中的对应项。
返回值为行列占比 rowspan: 2,colspan: 1 表示两行一列也就是当前行占两行一列。
在此方法内进行判断明显不太方便，无法将列表的多行进行比较，我选择先通过其他方法预处理，将tabledata数据各行所占行列先计算出，填充到每行的数据中。

dealData:function(){
                //先给所有数据加上rowspan
                for (var index = 0; index < this.tableData.length; index++) {
                    this.tableData[index].rowspan = 1;
                }
                var errorCheck = 0;
                for (let i = 0; i < this.tableData.length; i++) {
                    // 内层循环，上面已经给所有的行都加了item.rowspan = 1
                    // 如果当前行的id和下一行的id相等
                    // 就把当前item.rowspan + 1
                    // 下一行的item.rowspan - 1
                    for (let j = i + 1; j < this.tableData.length; j++) {
                        //此处可根据相同字段进行合并，此处是根据的id
                        if (this.tableData[i].guid === this.tableData[j].guid) {
                            this.tableData[i].rowspan++;
                            this.tableData[j].rowspan--;
                        }
                    }
                    // 这里跳过已经重复的数据
                    errorCheck = i;
                    i = i + this.tableData[i].rowspan - 1;

                    if(errorCheck > i || i < 0){   //errorCheck是上一个数据的索引 不可能比当前的数据索引大  相同id数据不相邻可能会引起此错误造成死循环
                        alert('数据顺序错误，单元合并失败！');
                        return
                    }
                }
            },

此时tabledata每行应该占几行已经有rowspan属性记录，我们改写合并方法

arraySpanMethod:function(obj){
                    return {
                        rowspan: obj.row.rowspan,
                        colspan: 1,
                    };
            },

合并列思路相同