背景：

通常后端是把所有数据（包含父级和子级）通过一个数组扁平化（以子级为维度）给我们，然后前端再去根据一定的条件进行单元格拆分合并，正常这样是没有问题的，但当遇到分页时，就会存在部分数据在上一页和部分数据在下一页的问题，现在我们换个角度，让后端以树形结构（以父级为维度）把数据传给我们呢？那就可以完美解决这个问题，请继续往下看：

解决：

.vue文件

<template>
  <el-table
    :data="tableData"
    border
    :span-method="objectSpanMethod">
    <el-table-column
      prop="bumen"
      label="部门"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>
<script>

export default {
  data() {
    return {
      tableData: [],
      // 假设这部分为服务端数据
      treeData: [
        {
          id: 1,
          bumen: '销售部',
          children: [
            {
              id: 11,
              bumen: '销售部',
              name: '子集11-王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }
          ]
        },
        {
          id: 2,
          bumen: '服务部',
          children: [
            {
              id: 21,
              bumen: '服务部',
              name: '子集22-王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }
          ]
        },
        {
          id: 3,
          bumen: '人事部',
          children: [
            {
              id: 31,
              bumen: '人事部',
              name: '子集31-王小虎3',
              address: '上海市普陀区金沙江路 1519 弄'
            },
            {
              id: 32,
              bumen: '人事部',
              name: '子集32-王小虎3',
              address: '上海市普陀区金沙江路 1519 弄'
            },
            {
              id: 33,
              bumen: '人事部',
              name: '子集33-王小虎3',
              address: '上海市普陀区金沙江路 1519 弄'
            }
          ]
        },
        {
          id: 5,
          bumen: '技术部'
        }
      ]
    }
  },
  created() {
    // 转换树形结构的数据，用来方便拆分合并单元格
    this.tableData = []
    this.treeData.forEach(i => {
      if (i.children) {
        i.children.forEach(j => {
          j.parentId = i.id
        })
      }
      if (i.children) {
        this.tableData.push(...i.children)
      } else {
        this.tableData.push(i)
      }
    })
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const parent = this.treeData.find(i => i.id === row.parentId)
        if (parent && row.id === parent.children[0].id) {
          return {
            rowspan: parent.children.length,
            colspan: 1
          }
        } else if (parent && row.id !== parent.children[0].id) {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }
  }
}
</script>

效果如下：