使用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
    评论
对于el-table动态列的单元合并,可以通过循环数据源数据获取该列需要合并数,然后在el-table的template中使用v-if指令来判断是否需要合并单元,如果需要则使用rowspan属性来合并单元。具体实现可以参考以下步骤: 1. 在el-table的columns中定义需要合并的列,并设置prop属性为该列的数据源字段名。 2. 在el-table的template中使用v-for指令循环数据源,并使用v-if指令判断是否需要合并单元。 3. 如果需要合并单元,则使用rowspan属性来合并单元,同时将该单元内容设置为空。 4. 如果不需要合并单元,则正常显示该单元内容。 例如,假设我们需要合并动态列中的第二列单元,可以按照以下方式实现: ```html <el-table :data="tableData"> <el-table-column label="姓名" prop="name"></el-table-column> <el-table-column label="动态列" v-for="(column, index) in dynamicColumns" :key="index" :prop="column.prop"> <template slot-scope="scope"> <div v-if="index === 1 && scope.row.span > 1" :rowspan="scope.row.span" :style="{ 'line-height': (scope.row.span * 40) + 'px' }"></div> <div v-else>{{ scope.row[column.prop] }}</div> </template> </el-table-column> </el-table> ``` 其中,tableData为el-table的数据源,dynamicColumns为动态列的配置数组,每个元素包含prop属性表示该列的数据源字段名。在template中,我们使用v-for指令循环动态列,并使用v-if指令判断是否需要合并单元。如果需要合并单元,则使用rowspan属性来合并单元,并设置该单元内容为空。如果不需要合并单元,则正常显示该单元内容

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值