elementplus表格合并

30 篇文章 0 订阅
6 篇文章 0 订阅

表格数据有层级嵌套,for循环遍历渲染的,导致直接调用表格行合并方法会有问题。
以下是代码

<div style="height:100%;width:100%;" v-for="item  in UpdateContentList" :key="item.tableHeader" v-loading="updateContnetLoading">
        <div class="dialogTableHeader">{{item.tableHeader}}</div>
        <el-table border :data="item.dataList"  :span-method="objectSpanMethod">
          <el-table-column label="Test Item" align="left" prop="testItem" width="220"/>
          <el-table-column label="可接受标准" align="left" prop="acceptanceCriteria" width="140"/>
          <el-table-column label="Time Point" align="left" prop="timePoint" width="120"/>
          <el-table-column label="Previous Information" align="left" prop="previousInformation" />
          <el-table-column label="Present Information" align="left" prop="presentInformation" />
        </el-table>
      </div>

表格合并方法

const objectSpanMethod = ({row,column,rowIndex,columnIndex}) => {
  // console.log(row,column)
  // nextTick((_)=>{
    if (columnIndex === 0){
      if(row.spanArr){
        const _row = row.spanArr;
        const _col = _row > 0?1:0;
        return {
          rowspan:_row,
          colspan:_col
        }
      }
      return {
          rowspan:0,
          colspan:0
        }
    }
    if (columnIndex === 1){
      if(row.spanArr1){
        const _row = row.spanArr1;
        const _col = _row > 0?1:0;
        return {
          rowspan:_row,
          colspan:_col
        }
      }
      return {
          rowspan:0,
          colspan:0
        }
    }
  // })
  
}

下面是具体处理逻辑

let arr = res.data;
    arr.forEach(item=>{
      let data = JSON.parse(JSON.stringify(item.dataList));
      // console.log(data,'000')
      item['spanArr'] = [];
      item['spanArr1'] = [];
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          // 如果是第一条记录(即索引是0的时候),向数组中加入1
          item['spanArr'].push(1);
          item['spanArr1'].push(1);
          pos.value = 0;
          pos1.value = 0;
        } else {
          if (data[i].testItem === data[i - 1].testItem) {
            item['spanArr'][pos.value] += 1;
            item['spanArr'].push(0);
            if (data[i].acceptanceCriteria === data[i - 1].acceptanceCriteria) {
              item['spanArr1'][pos1.value] += 1;
              item['spanArr1'].push(0);
            } else {
              item['spanArr1'].push(1);
              pos1.value = i;
              // 不相等push 1
            }
          } else {
            item['spanArr'].push(1);
            pos.value = i;
            item['spanArr1'].push(1);
            pos1.value = i;
            // 不相等push 1
          }
          
        }
      }
 
    })
    
    let arr1 = arr;
    arr1.forEach((item1,index)=>{
      item1.dataList.forEach((val,idx)=>{
        val['spanArr'] = item1.spanArr[idx];
        val['spanArr1'] = item1.spanArr1[idx];
      })
    })
    // console.log(arr1,'999')
    UpdateContentList.value = arr1;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值