关于前端:VueElementUI-中-eltable-动态合并单元格-spanmethod-方法

<template>
          <el-table
            border
            size="mini"
            height="100%"
            :span-method="cellMerge"
            :data="tableData"
          >
            <el-table-column
              label="设施"
              align="center"
              prop="a"
            />
            <el-table-column
              label="参数"
              align="center"
              prop="b"
            />
            <el-table-column
              label="数值"
              align="num"
              prop="c"
            />
          </el-table>
</template>
<script>
export default {data () {
    return {
      tableData: [{ a: '2222', b: '1', c: '2'},
        {a: '111', b: '1', c: '2'},
        {a: '111', b: '2', c: '3'},
        {a: '111', b: '2', c: '3'},
        {a: '111', b: '2', c: '3'},
        {a: '2222', b: '1', c: '2'},
        {a: '2222', b: '1', c: '2'},
        {a: '111', b: '2222', c: '3333'},
        {a: '111', b: '2222', c: '3333'}
      ],
      spanArr: []}
  },
  methods: {
    // groupBy 数组
    groupBy (data, params) {const groups = {}
      data.forEach(v => {const group = JSON.stringify(v[params])
        groups[group] = groups[group] || []
        groups[group].push(v)
      })
      return Object.values(groups)
    },
    // 计算 数据合并 索引
    getSpanArr (data, params) {
      // 接管重构数组
      let arr = []

      // 设置索引
      let pos = 0

      // 管制合并的数组
      this.spanArr = []

      // arr 解决
      this.groupBy(data, params).map(v => (arr = arr.concat(v)))
      
      // this.tableData = arr
      arr.map(res => {data.shift()
        data.push(res)
      })

      // spanArr 解决
      const redata = arr.map(v => v[params])
      redata.reduce((old, cur, i) => {if (i === 0) {this.spanArr.push(1)
          pos = 0
        } else {if (cur === old) {this.spanArr[pos] += 1
            this.spanArr.push(0)
          } else {this.spanArr.push(1)
            pos = i
          }
        }
        return cur
      }, {})
    },

    // 合并 tableData 数据
    cellMerge ({row, column, rowIndex, columnIndex}) {if (columnIndex === 0) {const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    }
  },
  created () {this.getSpanArr(this.tableData, 'a')
  }
}
</script>