el-table行合并

需要把指定列的相同且相邻的数据合并起来

 在获取tabledata的接口调用getSpanArr方法,此方法通过遍历把需要合并的字段id判断,相同的就给spanArr数组加一,在表格渲染时调用objectSpanMethod方法

需要新增一个数组spanArr接受判断的数据

<el-table
            :data="tableData"
            :span-method="objectSpanMethod"
            border
            style="width: 100%; margin-top: 20px">
            <el-table-column
              prop="id"
              label="项目名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="项目分期">
            </el-table-column>
            <el-table-column
              prop="amount1"
              label="地块名称">
            </el-table-column>
            <el-table-column
              prop="amount2"
              label="项目状态">
            </el-table-column>
            <el-table-column
              prop="amount3"
              label="所属区域">
            </el-table-column>
            <el-table-column
              prop="amount3"
              label="项目所在地">
            </el-table-column>
            <el-table-column
              prop="amount3"
              label="项目类型">
            </el-table-column>
          </el-table>
getTableData(){
        this.tableData={.....};//此处是接口获取的表格数据
        this.tableTotal=this.tableData.length;
        this.getSpanArr(this.tableData);
    },
    getSpanArr: function (data) {
      var vm = this;
      vm.spanArr = [];
      vm.pos = 0;
      data.forEach(function (item, index) {
        //判断是否是第一项
        if (index === 0) {
          vm.spanArr.push(1);
          vm.pos = 0;
        } else {
          //不是第一项时,就根据标识去存储
          if (data[index].id === data[index - 1].id) {
            // 查找到符合条件的数据时每次要把之前存储的数据+1
            vm.spanArr[vm.pos] += 1;
            vm.spanArr.push(0);
          } else {
            // 没有符合的数据时,要记住当前的index
            vm.spanArr.push(1);
            vm.pos = index;
          }
        }
      });
    },
    objectSpanMethod: function (obj) {
      if (obj.columnIndex === 0) {
        // 二维数组存储的数据 取出
        var _row = this.spanArr[obj.rowIndex];
        var _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      } else {
        return false;
      }
    },

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值