ElementUI el-table实现跨行显示

最近在做项目时遇到了一个table表格需要跨行的需求，因为项目中是用到的element-ui的table表格，所以参考element官网实现了此功能，在这里记录一下。

<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
    >
      <el-table-column
        prop="name"
        label="姓名"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="num"
        label="序号"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="180"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "elementTest",
  data() {
    return {
      tableData: [
        {name: 'zhang', num: 11, address: '北京'},
        {name: 'zhang', num: 12, address: '郑州'},
        {name: 'zhang', num: 13, address: '开封'},
        {name: 'wang', num: 21, address: '日照'},
        {name: 'wang', num: 11, address: '烟台'},
        {name: 'li', num: 31, address: '石家庄'},
        {name: 'li', num: 32, address: '保定'},
        {name: 'li', num: 33, address: '唐山'},
        {name: 'li', num: 34, address: '秦皇岛'}
      ],
      spanArray: [],
      pos: 0  // pos为spanArray的索引
    }
  },
  created() {
    this.init(this.tableData)
  },
  methods: {
    init(data) {
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          // 如果是第一条记录  向数组里面加入1  并设置索引位置
          this.spanArray.push(1)
          this.pos = 0
        } else {
          // 从第二条数据开始  判断它与前一条记录是否相等
          if (data[i].name === data[i - 1].name) {
            // 如果相等  将前一位元素+1 表示合并行数+1 同时向spanArr中添加元素0
            // 0 表示该行不显示
            this.spanArray[this.pos] += 1
            this.spanArray.push(0)
          } else {
            // 如果不相等  向spanArr中添加元素1  同时改变索引
            this.spanArray.push(1)
            this.pos = i
          }
        }
      }
      console.log('this.spanArray=====', this.spanArray)
      // 打印结果： [3, 0, 0, 2, 0, 4, 0, 0, 0]
    },
    objectSpanMethod({ rowIndex, columnIndex }){
      if (columnIndex === 0) {
        let _row = this.spanArray[rowIndex]
        let _col = _row > 0 ? 1 : 0
        console.log(`{rowspan: ${_row}, colspan: ${_col}}`)
        // 打印结果
        // {rowspan: 3, colspan: 1}
        // {rowspan: 0, colspan: 0}
        // {rowspan: 0, colspan: 0}
        // {rowspan: 2, colspan: 1}
        // {rowspan: 0, colspan: 0}
        // {rowspan: 4, colspan: 1}
        // {rowspan: 0, colspan: 0}
        // {rowspan: 0, colspan: 0}
        // {rowspan: 0, colspan: 0}

        // {rowspan: 0, colspan: 0}  表示此行不显示
        // {rowspan: 2, colspan: 1}  表示跨两行
         return {
           rowspan: _row,
           colspan: _col
         }
      }
    }
  }
};
</script>