vue+element ui合并单元格后，表头和内容不对应问题修改

最新推荐文章于 2024-07-09 12:13:23 发布

冷冷清清中的风风火火

最新推荐文章于 2024-07-09 12:13:23 发布

阅读量770

点赞数

分类专栏： vue 前端文章标签： vue.js ui javascript

本文链接：https://blog.csdn.net/qq_41451744/article/details/125559571

版权

前端同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

vue

14 篇文章 0 订阅

订阅专栏

1、首先确认了问题，是因为合并了单元格，导致横向滚动条滚到最右侧的时候，表头与列表内容不对应。

最初合并单元格写的方法是：

    // 合并单元格
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0 ||rowIndex === 7) {
        if (columnIndex === 0) {
          return {
            rowspan: 1,
            colspan: 28,
          };
        }
      }

    },

2、由于表格字段较多出现横向滚动条，拖动滚动条到最右侧时，出现表头与表格里的内容不对应。此处应该是我合并单元格的问题，修改合并单元格相关代码如下就可以了

    // 合并单元格
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0 ||rowIndex === 7) {
        if (columnIndex === 0) {
          return {
            rowspan: 1,
            colspan: 28,
          };
        }else{
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }

    },