使用el-table,将连续相同内容的单元格合并行

1.element官方文档

   el-tabale使用方法 :span-method="arraySpanMethod"




   arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex % 2 === 0) {
          if (columnIndex === 0) {
            return [1, 2];
          } else if (columnIndex === 1) {
            return [0, 0];
          }
        }
      }

return [1,2] 是指 [rowspan: 1,colspan: 2],这里的意思渲染到当前rowIndex,columnIndex的单元格时,返回的占用情况[1,1]表示1行1格,当前的值,[0,0]表示不占任何单元格,[1,2]则表示该数据占1行2格,所以是将当前columnIndex和columnIndex+1的单元格合并,并显示columnIndex的值

2.如何将连续的数据合并

我们可以将请求返回的数据,通过数据处理将每个单元格返回的rowspan和colspan计算好,放到参数,然后表格渲染的时候进行返回


indexList: [] //定义数组 //数据结构为{ rowIndex: undefined, columnIndex:undefined,spanDis: { rowspan: undefined, colspan: undefined } },





//返回数据处理逻辑代码
  this.conditionList = response.rows
 if (response.rows.length !== 0) {
          let columns = this.$refs.table13.columns
          //rowIndex 可以自己设置 我这里方便测试设置为3 表示从第四行数据计算,全部计算则算为0
          for (let rowIndex = 3; rowIndex < this.conditionList.length; rowIndex++) {
            //columnIndex 和上面同理
            for (let columnIndex = 10; columnIndex < columns.length; columnIndex++) {
              let data = _.find(this.indexList, { 'rowIndex': rowIndex, 'columnIndex': columnIndex })
              if (data) {
                continue
              } else {
                let colspan = 1
                let property = columns[columnIndex].property
                let item=this.conditionList[rowIndex]
                let currentCellValue = item[property] //当前单元格的值
                for (let index = columnIndex + 1; index < columns.length; index++) {
                    //判断单元格的值是否与后面的相同
                  let property = columns[index].property
                  let nextCellValue=item[property]
                  if (currentCellValue === nextCellValue) {
                    colspan++
                  }else {
                    //两个值不相同跳出循环
                    break
                  }

                }

                if(colspan>1){
                  for (let i = 0; i < colspan; i++) {
                    if (i === 0) {
                      this.indexList.push({
                        rowIndex: rowIndex,
                        columnIndex: columnIndex,
                        spanDis: { rowspan: 1, colspan: colspan }
                      })
                    } else {
                      this.indexList.push({
                        rowIndex: rowIndex,
                        columnIndex: columnIndex+i,
                        spanDis: { rowspan: 0, colspan: 0 }
                      })
                    }

                  }
                }else {
                  this.indexList.push({
                    rowIndex: rowIndex,
                    columnIndex: columnIndex,
                    spanDis: { rowspan: 1, colspan: 1 }
                  })
                }

              }

            }
          }
        }

3.在渲染时判断数据返回

  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      let data = _.find(this.indexList, { 'rowIndex': rowIndex, 'columnIndex': columnIndex })
      if(data){
        return data.spanDis
      }else {
        return {rowspan: 1, colspan: 1}
      }


    }

  • 8
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值