el-table 合并单元格, 合并相同内容, 动态合并

el-table 表格, 动态合并相同内容, 支持分页

WX20210811.png

WX20212015.png

核心代码

### html 代码
el-table(
    :span-method="arraySpanMethod"
    :data="activities"
    max-height="540px"
    border)
    el-table-column(
      v-for="(item, index) in columns"
      :key="item.prop"
      v-bind="item")


  ### JS 代码
  methods: {

    /**
    * 合并单元格
    * @param {Object} args[0].row 当前行
    * @param {Object} args[0].column 当前列
    * @param {Object} args[0].rowIndex 当前行索引
    * @param {Object} args[0].columnIndex 当前列索引
    * @return {Object}
    */
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      // 需要合并的列
      if (column.property === 'firName' || column.property === 'secName') {
        return {
          rowspan: this.mergeObj[column.property][rowIndex],
          colspan: 1
        }
      } else {
        return { rowspan: 1, colspan: 1 }
      }
    },

    /**
    * 获取合并对象
    * @param {Object} list 列表
    */
    getMergeObj (list) {
      this.mergeObj = {}
      // 标记
      let mack = 0
      for (let key in list[0]) {
        this.mergeObj[key] = []
        mack = 0
        list.forEach((item, index) => {
          if (index === 0) {
            this.mergeObj[key].push(1)
          } else {
            if (item[key] === list[index - 1][key] && item[key]) {
              this.mergeObj[key][mack] += 1
              this.mergeObj[key].push(0)
            } else {
              mack = index
              this.mergeObj[key].push(1)
            }
          }
        })
      }
      console.log('-合并对象:', this.mergeObj)
    }
  }