table 合并单元格

Louis919

已于 2024-07-25 13:49:36 修改

阅读量150

点赞数 3

分类专栏： vue问题总结文章标签： vue.js elementui

于 2024-04-29 11:15:32 首次发布

本文链接：https://blog.csdn.net/Louis919/article/details/138306343

版权

vue问题总结专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript在表格中根据后端返回的数据，通过双层循环检测并合并具有相同id的行。作者提供了`getstandardsByOpId`函数获取审核标准，并展示了`arraySpanMethod`方法来控制合并行为。

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

1、根据后端返回数据，将需要合并的数据设定相同的id

直接上代码

```text
//根据c获取审核标准
    getud() {
      request
        .get(
          `/su`
        )
        .then((res) => {
          if (res.code !== 0) return;
          this.tableData = res.data;
          this.tableData.forEach((v) => {
            v.rowspan = 1;
          });
          // 双层循环
          for (let i = 0; i < this.tableData.length; i++) {
            // 内层循环，上面已经给所有的行都加了v.rowspan = 1
            // 这里进行判断
            // 如果当前行的id和下一行的id相等
            // 就把当前v.rowspan + 1
            // 下一行的v.rowspan - 1
            for (let j = i + 1; j < this.tableData.length; j++) {
              if (
                this.tableData[i].groupId ===
                this.tableData[j].groupId
              ) {
                this.tableData[i].rowspan++;
                this.tableData[j].rowspan--;
              }
            }
            // 这里跳过已经重复的数据
            i = i + this.tableData[i].rowspan - 1;
          }
        });
    },
    
    // 合并行
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) { //哪些列需要合并
        return {
          rowspan: row.rowspan, //rowspan字段是自己上面加上的
          colspan: 1,
        };
      }
    },
```