使用elementUI实现el-table表格跨行

1.概述

element table 有一个属性:span-method 可以设置单元格合并，通过给table传入span-method方法可以实现合并行或列。

方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。

该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

因为:span-method的函数会自动遍历每一个单元格的数据，这里可以打印一下函数的参数。我们需要对一维数组进行相同项处理，把每一行需要合并的数据放在一个数组里形式例如[3,0,0,2,0]，这个数据形式代表第一行合并3行，第二行被合并，第三行被合并，第四行合并2行…

2.template区域

<el-table border stripe :data="tableData" :span-method="objectSpanMethod">
  <el-table-column></el-table-column>
  <el-table-column></el-table-column>
  <el-table-column></el-table-column>
</el-table>

3.JS区域

data() {
  return {
    tableData: [],
    spanArr: [],
    pos: 0
  }
},
methods: {
	// 获取列表数据  
  async getDetail() {
      const params = {}
      const { data: res } = await this.$http.post('')
      if (res.code && res.code !== 200) return messageTip(res.message, 4)
      const data = res.data
      this.tableData = res.data
      this.getSpanArr(tableData)
    },
    // 要合并的数组
    getSpanArr(data) {
      this.spanArr = []
      data.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1)
          this.pos = 0 // 指针
        } else {
          if (item['etype'] && item['etype'] === data[index - 1]['etype']) { //当前项和前一项比较 
            this.spanArr[this.pos] += 1; //相同值第一个出现的位置，统计需要合并多少行,指针往后移动一位
            this.spanArr.push(0); //新增一个被合并行 0表示要合并
          } else {
            this.spanArr.push(1); //否则不合并
            this.pos = index; //指向位移
          }
        }
      })
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // item.etype == '1' ? '订单' : '结算'
        const _row = this.spanArr[rowIndex];
        /*  
          第一行：_row = [2, 0, 2, 0][0] = 2
          第二行：_row = [2, 0, 2, 0][1] = 0
          第三行：_row = [2, 0, 2, 0][2] = 2
          第四行：_row = [2, 0, 2, 0][3] = 0
        */
        const _col = _row > 0 ? 1 : 0;
        /*  
          第一列：_col = 1
          第二列：_col = 0
          第三列：_col = 1
          第四列：_col = 0
        */
        console.log('rowIndex', rowIndex) // 0, 1, 2, 3
        console.log('spanArr', this.spanArr) // [2, 0, 2, 0]
        console.log('_row', _row)
        console.log('_col', _col)
        return {
          rowspan: _row, // rowspan: [2, 0, 2, 0]
          colspan: _col, // colspan: [1, 0, 1, 0]
          // 最终结果：
          // 合并两行合并1列, 不合并, 不合并
          // 合并两行合并1列, 不合并, 不合并
          // 第一行合并两行，第二行被合并，第三行合并两行，第四行被合并
          // 第一行合并1列，第二列被合并，第三行合并1列，第四行被合并
        };
      }
    }
  }
}