el-table动态获取数据合并行列

element自带的方法不能够随机分,只能是固定的去合并,这里我的需求是根据图片的id去合并,一张图片可能对应多个题型在这里插入图片描述在这里插入图片描述

获取到的数据同时赋给tableData和spanArr,并在获取到数组的函数里执行getSpanArr方法,相当于给table赋值的还是用tableData 但是切割table是用的spanArr方法。
在这里插入图片描述

getSpanArr (data) {
      this.spanArr = [] // 定义在vue的data中
      if (data === null) {
        return
      }
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
        } else {
          if (data[i].pictureId === data[i - 1].pictureId) {  // 我这里是根据图片去合并列,一张图片可能会对应多个题
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
        }
      }
    },
arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1 || columnIndex === 0) {  // 第一行和第二行进行合并
        const _row = this.spanArr[rowIndex] // 从处理完的数组里获取
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col // 相当于给给表格加上rowspan,colspan属性
        }
      }
    },

在这里插入图片描述
以上是合并一种,当要动态合并不同列的时候,再新增一个数组。getSpanArr的时候多套一层if,arraySpanMethod函数里去用
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 每次走到第3列时给单元格加上rowspan和colspan属性
        const _row = this.spanArr[rowIndex] // 从处理完的数组里获取
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col // 相当于给给表格加上rowspan,colspan属性
        }
      } else if (columnIndex === 1) {
        const _row = this.contentSpanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
getSpanArr (data) {
      this.spanArr = [] // 定义在vue的data中
      this.contentSpanArr = []
      if (data === null) {
        return
      }
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
          this.contentSpanArr.push(1)
          this.position = 0
        } else {
          if (data[i].differentia === data[i - 1].differentia) {
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
          if (data[i].classifyName === data[i - 1].classifyName) {
            this.contentSpanArr[this.position] += 1
            this.contentSpanArr.push(0)
          } else {
            this.contentSpanArr.push(1)
            this.position = i
          }
        }
      }
    }
  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
对于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属性来合并单元格,并设置该单元格的内容为空。如果不需要合并单元格,则正常显示该单元格的内容。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值