elementui合并行

<template>
  <div>
    <!-- <el-table :data="tableData" :span-method="arraySpanMethod" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="amount1" sortable label="数值 1"> </el-table-column>
      <el-table-column prop="amount2" sortable label="数值 2"> </el-table-column>
      <el-table-column prop="amount3" sortable label="数值 3"> </el-table-column>
    </el-table> -->
    <h2>行合并</h2>
    <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="amount1" label="数值 1（元）"> </el-table-column>
      <el-table-column prop="amount2" label="数值 2（元）"> </el-table-column>
      <el-table-column prop="amount3" label="数值 3（元）"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'SpanArrDemos',
  data() {
    return {
      tableData: [
        {
          id: '111',
          name: '王小虎1',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        },
        {
          id: '111',
          name: '王小虎2',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        },
        {
          id: '111',
          name: '王小虎vvv',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        },
        {
          id: '222',
          name: '王小虎vvv',
          amount1: '666',
          amount2: '666',
          amount3: 17
        },
        {
          id: '333',
          name: '王小虎5',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        },
        {
          id: '333',
          name: '王小虎6',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }
      ]
    }
  },
  mounted() {
    this.getSpanArr(this.tableData, 'id')
  },
  methods: {
    getSpanArr(list = [], attr = '') {
      // 用于设置要合并的行 0 表示第一行
      this.spanArr = []
      // 用于记录每一行的合并数
      let pos = 0
      for (let i = 0; i < list.length; i++) {
        if (i === 0) {
          // 如果是第一条记录（即索引是0的时候），向数组中加入１
          this.spanArr.push(1)
        } else {
          let previous = list[i - 1][attr]
          let current = list[i][attr]
          // 当前记录的属性值和上一条记录的属性值相等，填充为0-隐藏，否则填充为１
          if (previous === current) {
            // 当前指针位置的数自增，并且spanArr中填充0，表示隐藏
            this.spanArr[pos] += 1
            this.spanArr.push(0)
          } else {
            // 不相等，更新指针位置，并且填充1，出现新值，重新计数
            pos = i
            this.spanArr.push(1)
          }
        }
      }
    },
    // 行合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 用于设置要合并的列 0 表示第一列
      if (columnIndex === 0) {
        console.log('this.spanArr', this.spanArr)
        const cRow = this.spanArr[rowIndex]
        const cCol = cRow > 0 ? 1 : 0
        let result = {
          rowspan: cRow, // 合并的行数，占据的行数
          colspan: cCol // 合并的列数，占据的列数，为0表示不显示
        }
        console.log('rowIndex, columnIndex, result', rowIndex + 1, columnIndex + 1, result)
        return result
      }
    }
  }
}
</script>