项目中使用：element-vue的合并行、合并列

最新推荐文章于 2024-06-25 16:27:56 发布

一个小菜逼

最新推荐文章于 2024-06-25 16:27:56 发布

阅读量194

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_71854821/article/details/134877878

版权

表格总共23列65行，数据量还是比较大的，后端按顺序返回65行数据。

以下需要注意：第一列的columnIndex 是0，第二列columnIndex 是1，第一行的rowIndex是0，第二行的rowIndex是1，以此类推......

数据量大的时候，中间的数据有的需要合并，有的不需要合并，就一定要用上setRowCol(0,0)和setRowCol(1,1)。在这次需求中，我就被坑了，开始误解了setRowCol(0,0)的意思，以为代表不合并，只占一行的写了这句就可以了，到最后发现最后一行的最后几列合在了一起。

setRowCol(0,0)代表被合并掉的行，也就是被隐藏起来的行；

setRowCol(1,1)代表，该列下，合并一行一列，也就是相当于不合并。

arraySpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {//第一列
          return this.setRowCol(10, 1);//第一列的一到十行合并，
        } else if (rowIndex === 10) {
          return this.setRowCol(15, 1);//第一列的11到25行合并，总共合并15行
        } else if (rowIndex === 25) {
          return this.setRowCol(14, 1);
        } else if (rowIndex === 39) {
          return this.setRowCol(21, 1);
        } else if (rowIndex === 60) {
          return this.setRowCol(4, 1);
        } else if (rowIndex === 64) {
          return this.setRowCol(1, 1);
        } else {
          return this.setRowCol(0, 0);
        }
      } else if (columnIndex === 2) {
        if (rowIndex === 0 || rowIndex === 5) {
          return this.setRowCol(5, 1);
        } else if (
          rowIndex === 10 ||
          rowIndex === 17 ||
          rowIndex === 25 ||
          rowIndex === 32 ||
          rowIndex === 53
        ) {
          return this.setRowCol(7, 1);
        } else if (rowIndex === 24) {
          return this.setRowCol(1, 1);
        } else if (rowIndex === 39) {
          return this.setRowCol(14, 1);
        } else if (rowIndex === 60) {
          return this.setRowCol(4, 1);
        } else if (rowIndex === 64) {
          return this.setRowCol(1, 1);
        } else {
          return this.setRowCol(0, 0);
        }
      } else if (columnIndex === 20 || columnIndex === 22) {
        if (rowIndex === 0) {
          return this.setRowCol(10, 1);
        } else if (rowIndex === 10) {
          return this.setRowCol(15, 1);
        } else if (rowIndex === 25) {
          return this.setRowCol(14, 1);
        } else if (rowIndex === 39) {
          return this.setRowCol(21, 1);
        } else if (rowIndex === 60) {
          return this.setRowCol(4, 1);
        } else if (rowIndex === 64) {
          return this.setRowCol(1, 1);
        } else {
          return this.setRowCol(0, 0);
        }
      } else if (
        columnIndex === 15 ||
        columnIndex === 16 ||
        columnIndex === 17 ||
        columnIndex === 18
      ) {
        if (rowIndex < 39 || rowIndex === 64) {
          return this.setRowCol(1, 1);
        } else if (rowIndex === 39) {
          return this.setRowCol(25, 1);
        } else {
          return this.setRowCol(0, 0);
        }
      }
    },
  //直接调用setRowCol传入rowspan和colspan即可
    setRowCol(rowspan, colspan) {
      return {
        rowspan,
        colspan,
      };
    },