ant-design-vue-pro a-table表格按行合并

最新推荐文章于 2024-09-04 11:20:04 发布

红辣椒...

最新推荐文章于 2024-09-04 11:20:04 发布

阅读量1.2k

点赞数

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

本文链接：https://blog.csdn.net/bloestone/article/details/122141613

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍如何修复AntDesign-VueTable中表格行合并的问题，通过改进rowSpan计算逻辑，确保只合并首行内容相同的部分，提高表格正确显示。博主分享了修复后的代码和关键调整，适用于处理复杂场景下的数据合并需求。

摘要由CSDN通过智能技术生成

因某些场景需要对表格内容按行合并，参考网上帖子(70条消息) antdesign-vue table合并列_Dreamy smile-CSDN博客

实际测试有时页面展示正常，有时不正常，分析这段代码rowSpan统计的是所有单元内容与text相同的行，实际rowSpan只有合并的第一行应该统计内容相同的行数，其余被合并行rowSpan应该设置为0，增加传入当前行做判断，调整后代码如下：

 const mergeCells = (text, index, array, columns) => {
    let rowSpan = 0
    if (array.length == 1) {
      rowSpan = 1
    } else {
      let i = index;
      for (i = index; i >= 0; i--) {
        if (array[i][columns] == text) {
          continue;
        } else {
          break;
        }
      }
      if (index > i + 1) {
        rowSpan = 0
      } else {
        let j = index;
        for (j = index; j < array.length; j++) {
          if (array[j][columns] == text) {
            continue;
          } else {
            break;
          }
        }
        rowSpan = j - index
        if (rowSpan < 0) {
          rowSpan = 0
        }
      }
    }
    return rowSpan
  };

以上代码for循环i得到该单元格内容最小下标-1，for循环j得到该单元格内容最大下标+1。