原文链接

    1. <template>
    2.   <div>
    3.     <el-table :data="tableData" border style="width: 60%" :span-method="objectSpanMethod">
    4.       <el-table-column prop="name" label="姓名" />
    5.       <el-table-column prop="amount1" label="数值1" />
    6.       <el-table-column prop="amount2" label="数值2" />
    7.     </el-table>
    8.   </div>
    9. </template>
    11. <script>
    12. export default {
    13.   data() {
    14.     return {
    15.       tableData: [
    16.         { name: "Tom", amount1: 10, amount2: 15 },
    17.         { name: "Tom", amount1: 11, amount2: 16 },
    18.         { name: "Jack", amount1: 12, amount2: 17 },
    19.         { name: "Andy", amount1: 13, amount2: 18 },
    20.         { name: "Andy", amount1: 14, amount2: 19 },
    21.       ],
    22.     };
    23.   },
    24.   mounted() {
    25.     console.log("结果：", this.getSpanNumber(this.tableData, "name"));
    26.   },
    27.   methods: {
    28.     //合并方法
    29.     objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    30.       if (columnIndex == 0) {
    31.         //合并相同的名字
    32.         let nameSpan = this.getSpanNumber(this.tableData, "name");
    33.         return {
    34.           rowspan: nameSpan[rowIndex],
    35.           colspan: 1,
    36.         };
    37.       }
    38.     },
    39.     //获取要合并的行数
    40.     getSpanNumber(data, prop) {
    41.       //data要处理的数组，prop要合并的属性，比如name
    43.       //数组的长度，有时候后台可能返回个null而不是[]
    44.       let length = Array.isArray(data) ? data.length : 0;
    45.       if (length > 0) {
    46.         //用于标识位置
    47.         let position = 0;
    48.         //用于对比的数据
    49.         let temp = data[0][prop];
    50.         //要返回的结果
    51.         let result = [1];
    52.         //假设数据是AABCC，我们的目标就是返回20120
    53.         for (let i = 1; i < length; i++) {
    54.           if (data[i][prop] == temp) {
    55.             //标识位置的数据加一
    56.             result[position] += 1;
    57.             //当前位置添0
    58.             result[i] = 0;
    59.           } else {
    60.             //不相同时，修改标识位置，该位置设为1，修改对比值
    61.             position = i;
    62.             result[i] = 1;
    63.             temp = data[i][prop];
    64.           }
    65.         }
    66.         //返回结果
    67.         return result;
    68.       } else {
    69.         return [0];
    70.       }
    71.     },
    72.   },
    73. };
    74. </script>

    结果：

    Element-ui单元格合并 - 图1