elementui 动态合并单元格

陆仁丶

已于 2022-12-26 14:36:48 修改

阅读量4.1k

点赞数 1

分类专栏：前端文章标签： elementui javascript ecmascript

于 2021-10-27 14:10:24 首次发布

本文链接：https://blog.youkuaiyun.com/kk12138123/article/details/120991678

版权

前端专栏收录该内容

44 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用`el-table`组件实现对象合并单元格的方法，通过`objectSpanMethod`函数处理数据，确保相同公司名的数据行进行合并。通过示例代码展示了如何根据前后数据的公司属性动态设置rowspan。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图
在这里插入图片描述
废话不多说直接上代码

1、:span-method=“objectSpanMethod” 在table属性中启用合并单元格方法

 <el-table
            class="mytable"
            :data="drugDeptApplyDetailVOs"
            style="width: 100%;height: 600px;overflow: scroll"
            border
            @selection-change="parentHandleSelectionChange"
            :span-method="objectSpanMethod"
            :row-class-name="tableRowClassName"
            :header-cell-style="{background:'#469cc9',color:'#ffffff'}">

2、处理数据

   //处理数据
          for (let i = this.drugDeptApplyDetailVOs.length - 1; i > 0; i--) {
            //从后向前遍历
            if (!this.drugDeptApplyDetailVOs[i].rowspanOrg) {
              //设置初始值(可理解为：每个数据项必定占一行)
              this.drugDeptApplyDetailVOs[i].rowspanOrg = 1;
            }
            if (this.drugDeptApplyDetailVOs[i].applyOrg == this.drugDeptApplyDetailVOs[i - 1].applyOrg) {
              //当前公司名与前一个数据的公司相同时 设置rowspan（前数据一项与下一行的相同时 合并一行）
              this.drugDeptApplyDetailVOs[i - 1].rowspanOrg = this.drugDeptApplyDetailVOs[i].rowspanOrg + 1;
              this.drugDeptApplyDetailVOs[i].rowspanOrg = -1;
            }
            if (!this.drugDeptApplyDetailVOs[i].rowspanCode) {
              //设置初始值(可理解为：每个数据项必定占一行)
              this.drugDeptApplyDetailVOs[i].rowspanCode = 1;
            }
            if (this.drugDeptApplyDetailVOs[i].applyCode == this.drugDeptApplyDetailVOs[i - 1].applyCode) {
              //当前公司名与前一个数据的公司相同时 设置rowspan（前数据一项与下一行的相同时 合并一行）
              this.drugDeptApplyDetailVOs[i - 1].rowspanCode = this.drugDeptApplyDetailVOs[i].rowspanCode + 1;
              this.drugDeptApplyDetailVOs[i].rowspanCode = -1;
            }
          }

3、合并方法

 /**
     *合并单元格
     * @param row
     * @param column
     * @param rowIndex
     * @param columnIndex
     * @returns {{colspan: number, rowspan: number}}
     */
    objectSpanMethod({row, columnIndex}) {
      if (columnIndex === 1) {
        if (row.rowspanOrg > 0) {
          return {
            rowspan: row.rowspanOrg,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
      if (columnIndex === 2) {
        if (row.rowspanCode > 0) {
          return {
            rowspan: row.rowspanCode,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },