Vue2 +Element UI 表格行合并

如果相邻数据是一致的，则单元格的行合并,指定需要合并的列，下面我是指定合并了分类和类型这两列。
先看效果
Element UI为我们的提供了一个属性span-method：合并行或列的计算方法
下面是一个示例:

html部分 - 主要是在表上指定span-method方法

<template>
  <div>
    <el-table :span-method="objectSpanMethod" :data="tableData" row-key="id" border>
      <el-table-column label="序号" width="55" align="center">
        <template slot-scope="scope">{{ scope.$index + 1 }}template>
      el-table-column>
      <el-table-column prop="name" label="分类" align="center">el-table-column>
      <el-table-column prop="num" label="数量" align="center">el-table-column>
      <el-table-column prop="type" label="类型" align="center">el-table-column>
    el-table>
  div>
template>
1
2
3
4
5
6
7
8
9
10
11
12

data部分 - 表格数据

data() {
    return {
      tableData: [{
        name: '咖啡',
        num: '2',
        type: '饮料'
      },
        {
          name: '咖啡',
          num: '5',
          type: '饮料',
        }, {
          name: '巧克力',
          num: '2',
          type: '高热量食品',
        }, {
          name: '巧克力',
          num: '2',
          type: '高热量食品',
        }, {
          name: '巧克力',
          num: '2',
          type: '高热量食品',
        }, {
          name: '牛奶',
          num: '2',
          type: '蛋白质',
        }]
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

methods部分 - span-method方法，行合并的逻辑

methods: {
    // table合并列
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      let data = this.tableData; // 拿到当前table中的数据
      let cellValue = row[column.property]; // 获取当前位置的值
      let sortArr = ['name', 'type']; // 需要合并的字段（用于合并行的属性）
      if (cellValue && sortArr.includes(column.property)) {
        let prevRow = data[rowIndex - 1]; // 获取上一行的数据
        let nextRow = data[rowIndex + 1]; // 获取下一行的数据
        if (prevRow && prevRow[column.property] === cellValue) { // 当有上一行的数据，并且与当前值相等时
          return {rowspan: 0, colspan: 0}; // 返回一个对象，表示不需要合并单元格
        } else {
          let countRowspan = 1;
          while (nextRow && nextRow[column.property] === cellValue) { // 当有下一行的数据并且与当前值相等时，获取新的下一行数据
            nextRow = data[++countRowspan + rowIndex];
          }
          if (countRowspan > 1) {
            return {rowspan: countRowspan, colspan: 1}; // 返回一个对象，表示需要合并行单元格
          }
        }
      }
    },
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23