iview的table组件合并行单元格

<template>
  <Table :columns="columns" :data="tableDate" border :span-method="handleSpan"></Table>
</template>
<script>
export default {
  data () {
    return {
      columns: [
        {
          title: 'Date',
          key: 'date'
        },
        {
          title: 'Name',
          key: 'name'
        },
        {
          title: 'Age',
          key: 'age'
        },
        {
          title: 'Address',
          key: 'address'
        }
      ],
      dataMock: [
        {
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park',
          date: '2016-10-03'
        },
        {
          name: 'John Brown',
          age: 24,
          address: 'London No. 1 Lake Park',
          date: '2016-10-01'
        },
        {
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park',
          date: '2016-10-02'
        },
        {
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04'
        }
      ],
      tableDate: []
    }
  },
  methods: {
    handleSpan ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        //计算合并的行数列数
        let x = row.mergeCol == 0 ? 0 : row.mergeCol
        let y = row.mergeCol == 0 ? 0 : 1
        return [x, y]
      }
    },
    // 排序将相同的放到一起
    rowSort (data) {
      let newArrys = []
      let tmpArr = []
      //筛选出不重复的name值,将其放到 names数组中
      data.forEach(e => {
        if (!tmpArr.includes(e.name)) {
          tmpArr.push(e.name)
        }
      })
      for (let i = 0; i < tmpArr.length; i++) {
        data.forEach(el => {
          if (el.name === tmpArr[i]) {
            newArrys.push(el)
          }
        })
      }
      return newArrys
    },
    assembleData (arr) {
      // 将相同的放到一起
      let data = this.rowSort(arr)
      let names = []
      //筛选出不重复的name值,将其放到 names数组中
      data.forEach(e => {
        if (!names.includes(e.name)) {
          names.push(e.name)
        }
      })

      let nameNums = []
      //将names数组中的 name值设置默认合并0个单元格,放到 nameNums中
      names.forEach(e => {
        nameNums.push({ name: e, num: 0 })
      })

      //计算每种 name值所在行需要合并的单元格数
      data.forEach(e => {
        nameNums.forEach(n => {
          if (e.name == n.name) {
            n.num++
          }
        })
      })

      //将计算后的合并单元格数整合到 data中
      data.forEach(e => {
        nameNums.forEach(n => {
          if (e.name == n.name) {
            if (names.includes(e.name)) {
              e.mergeCol = n.num
              //删除已经设置过的值(防止被合并的单元格进到这个 if 语句中)
              names.splice(names.indexOf(n.name), 1)
            } else {
              //被合并的单元格设置为 0
              e.mergeCol = 0
            }
          }
        })
      })
      return data
    }
  },
  mounted () {
    this.tableDate = this.assembleData(this.dataMock)
  }
}
</script>

参考
View UI （iview）表格合并单元格（行/列合并）