element表格相同行合并

最新推荐文章于 2024-08-13 23:10:15 发布

可爱小仙子

最新推荐文章于 2024-08-13 23:10:15 发布

阅读量452

点赞数 3

分类专栏： vue 文章标签： javascript

本文链接：https://blog.csdn.net/qq_42661587/article/details/120102025

版权

vue 专栏收录该内容

40 篇文章 4 订阅

订阅专栏

先上效果图：

<el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        style="width: 100%; margin-top: 20px"
      > 

</el-table>

/**
     * 合并父级行
     */
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const dataProvider = this.tableData;
      if (columnIndex === 0) {
        // 上一条数据
        const prevRow = dataProvider[rowIndex - 1];
        // 下一条数据
        let nextRow = dataProvider[rowIndex + 1];
        // 上一条数据的aFuncSn标识等于当前条数据的aFuncSn标识
        if (prevRow && prevRow.aFuncSn === row.aFuncSn) {
          return { rowspan: 0, colspan: 0 };
        } else {
          let rowspan = 1;
          // 下一条数据的aFuncSn标识等于当前条数据的aFuncSn标识
          while (nextRow && nextRow.aFuncSn === row.aFuncSn) {
            rowspan++;
            nextRow = dataProvider[rowspan + rowIndex];
          }
          if (rowspan > 1) {
            return { rowspan, colspan: 1 };
          }
        }
      }
    },