element中table表格动态合并行列

最新推荐文章于 2025-03-17 09:07:14 发布

程序媛-莉莉子

最新推荐文章于 2025-03-17 09:07:14 发布

阅读量2.9k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_42483955/article/details/123900202

版权

本文介绍如何使用Element UI表格的`span-method`属性实现数据行和列的合并，通过`objectSpanMethod`方法动态控制每行的合并计数，适用于业务场景中需要按规则整理数据展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：element中el-tabel有提供span-method方法合并行或者列，可以参考下element文档（https://element.eleme.cn/#/zh-CN/component/table）。所以我们想办法构造每条数据的row，col合并的数量就行。

table代码

<el-table
      ref="table"
      :data="list"
      style="width: 100%;"
      :span-method="objectSpanMethod"
      size="mini"    >
      <el-table-column type="index" align="center" label="序号"></el-table-column>
      <el-table-column label="firstClsf" align="center" max-width="80">
        <template slot-scope="scope">{{ scope.row.firstClsf }}</template>
      </el-table-column>
      <el-table-column label="secondClsf" align="center" max-width="80">
        <template slot-scope="scope">{{ scope.row.secondClsf}}</template>
      </el-table-column>
      <el-table-column label="bizName" align="center" min-width="90">
        <template slot-scope="scope">{{ scope.row.bizName }}</template>
      </el-table-column>
      <el-table-column label="txnId" align="center" min-width="90">
        <template slot-scope="scope">{{ scope.row.txnId }}</template>
      </el-table-column>
 </el-table>

export default {
data () {
    return {
      firstClsfIndexArr: [], // 存放firstClsf列每一行记录的合并数  控制firstClsf的合并
      firstClsfIndexRecode: 0, // firstClsfIndexArr的索引
      secondClsfIndexArr: [], // 存放secondClsf列每一行记录的合并数  控制secondClsf列的合并
      secondClsfIndexRecode: 0, // secondClsfIndexArr的索引
      bizNameIndexArr: [], // 存放bizName列每一行记录的合并数   控制第三列的合并  以此类推  每多控制一列，多创建两个变量
      bizNameIndexRecode: 0,
    }
  },
   mounted () {
   // 方便大家测试，数据定死了。后获取数据赋值就好
    this.list = [
    { firstClsf: '1', secondClsf: '3', bizName: 'ee', txnId: '23', caseName: 'ndkkf', txnTime: '2021-2-13', remark: 'ss' },
    { firstClsf: '2', secondClsf: '3', bizName: 'rf', txnId: '33', caseName: 'hhhhh', txnTime: '2021-2-18', remark: '3ee' },
    { firstClsf: '2', secondClsf: '4', bizName: 'ee', txnId: '34', caseName: 'hhhhh', txnTime: '2021-2-18', remark: '3ee' }]
    this.getSpanArr(this.list)
  },
  methods: {
	getSpanArr (data) { // 获取
      // firstClsfIndexArr/secondLevelIndexArr来存放要合并的格数，同时还要设定一个变量firstLevelIndexPos/secondLevelIndexPos来记录
      this.firstClsfIndexArr = []
      this.secondClsfIndexArr = []
      this.bizNameIndexArr = []
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.firstClsfIndexArr.push(1)
          this.firstClsfIndexRecode = 0
          this.secondClsfIndexArr.push(1)
          this.secondClsfIndexRecode = 0
          this.bizNameIndexArr.push(1)
          this.bizNameIndexRecode = 0
        } else {
          // 判断当前元素与上一个元素是否相同(第2列)
          if (data[i].firstClsf === data[i - 1].firstClsf) {
            this.firstClsfIndexArr[this.firstClsfIndexRecode] += 1
            this.firstClsfIndexArr.push(0)
          } else {
            this.firstClsfIndexArr.push(1)
            this.firstClsfIndexRecode = i
          }
          // 判断当前元素与上一个元素是否相同(第3列)
          if (data[i].secondClsf === data[i - 1].secondClsf) {
            this.secondClsfIndexArr[this.secondClsfIndexRecode] += 1
            this.secondClsfIndexArr.push(0)
          } else {
            this.secondClsfIndexArr.push(1)
            this.secondClsfIndexRecode = i
          }
          // 判断当前元素与上一个元素是否相同(第4列)
          if (data[i].bizName === data[i - 1].bizName) {
            this.bizNameIndexArr[this.bizNameIndexRecode] += 1
            this.bizNameIndexArr.push(0)
          } else {
            this.bizNameIndexArr.push(1)
            this.bizNameIndexRecode = i
          }
        }
      }
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) { // 框架自带合并方法
      if (columnIndex > 3) {
        return
      }
      // 下面用的三元表达式的嵌套
      const _row = columnIndex === 1 ? this.firstClsfIndexArr[rowIndex] : columnIndex === 2 ? this.secondClsfIndexArr[rowIndex] : this.bizNameIndexArr[rowIndex]
      const _col = _row > 0 ? 1 : 0
      return {
        rowspan: _row,
        colspan: _col,
      }
    },
  }
}