Vue Elements Table 合并行

<template>
  <div>
    <pl-table
      border
      :data="tableList.tableData"
      :span-method="objectSpanMethod"
      style="width: 100%; margin-top: 20px">
      <pl-table-column
        v-for="item in tableList.tableConfig"
        :key="item.key"
        :prop="item.key"
        :label="item.key"
        width="180">
        <template slot-scope="scope">
          {{scope.row[item.key].value}}
        </template>
      </pl-table-column>
    </pl-table>
  </div>
</template>

<script>

import { PlTable, PlTableColumn } from 'pl-table'

export default {
  components: {
    PlTable,
    PlTableColumn
  },
  data() {
    return {
      tableList: {
        tableData: [
          {
            total: {
              value: 'total1'
            },
            202008: {
              value: '202008'
            },
            202009: {
              value: '202009'
            },
            202010: {
              value: '202010'
            },
            202011: {
              value: '202011'
            }
          },
          {
            total: {
              value: 'total2'
            },
            202008: {
              value: '202008'
            },
            202009: {
              value: '202009'
            },
            202010: {
              value: '202010'
            },
            202011: {
              value: '202011'
            }
          },
          {
            total: {
              value: 'total3'
            },
            202008: {
              value: '202008'
            },
            202009: {
              value: '202009'
            },
            202010: {
              value: '202010'
            },
            202011: {
              value: '202011'
            }
          },
          {
            total: {
              value: 'total4'
            },
            202008: {
              value: '202008'
            },
            202009: {
              value: '202009'
            },
            202010: {
              value: '202010'
            },
            202011: {
              value: '202011'
            }
          },
          {
            total: {
              value: 'total5'
            },
            202008: {
              value: '202008'
            },
            202009: {
              value: '202009'
            },
            202010: {
              value: '202010'
            },
            202011: {
              value: '202011'
            }
          }
        ],
        tableConfig: [
          {
            key: 'total',
            value: 'total'
          },
          {
            key: '202008',
            value: '8'
          },
          {
            key: '202009',
            value: '9'
          },
          {
            key: '202010',
            value: '10'
          },
          {
            key: '202011',
            value: '11'
          }
        ]
      },
　　　 // 索引保存数组
      spanArr: [],
　　　 // 在第几行开始
      pos: 3
    }
  },
  methods: {
　　// 获取索引
    getSpanArr(data) {
      const num = data.length - this.pos + 1
      for (var i = 0; i < data.length; i++) {
        if (i >= this.pos - 1) {
          const state = this.spanArr.some((item) => {
            return item === num
          })
          if (state) {
            this.spanArr.push(0)
          } else {
            this.spanArr.push(num)
          }
        } else {
          this.spanArr.push(1)
        }
      }
    },
　　 // 进行合并行
    objectSpanMethod({ 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.tableList.tableData)
  }
}
</script>

<style>
</style>