el-table单元格合并

首先先上效果

 合并思路

 HTMl

<el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px; border: solid 1px black"
      row-key="id"
      :cell-style="{ borderColor: 'gray' }"
      :header-cell-style="{ borderColor: 'gray' }"
      border
      size="mini"
      :span-method="objectSpanMethod"
    >
      <el-table-column prop="type" label="类型" width="80"> </el-table-column>
      <el-table-column prop="date" 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-column prop="phone" label="电话"> </el-table-column>
      <el-table-column prop="emile" label="邮件"> </el-table-column>
    </el-table>

数据

 tableData: [
        {
          id: 1,
          type: "a",
          date: "2016-05-02",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 1518 弄",
          phone: "12",
          emile: "12",
        },
        {
          id: 2,
          type: "a",
          date: "2016-05-04",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 1517 弄",
          phone: "12",
          emile: "12",
        },
        {
          id: 3,
          type: "a",
          date: "2016-05-01",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 1519 弄",
          phone: "12",
          emile: "12",
        },
        {
          id: 4,
          type: "a",
          date: "2016-05-01",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 1519 弄",
          phone: "12",
          emile: "12",
        },
        {
          id: 5,
          type: "b",
          date: "2016-05-01",
          name: "王小虎3",
          address: "上海市普陀区金沙江路 1516 弄",
          phone: "12",
          emile: "12",
        },
        {
          id: 6,
          type: "b",
          date: "2016-05-03",
          name: "王小虎4",
          address: "上海市普陀区金沙江路 1516 弄",
          phone: "12",
          emile: "12",
        },
        {
          id: 7,
          type: "b",
          date: "2016-05-03",
          name: "王小虎41",
          address: "上海市普陀区金沙江路 1516 弄",
          phone: "12",
          emile: "12",
        },
        {
          id: 8,
          type: "c",
          date: "2016-05-03",
          name: "王小虎4",
          address: "上海市普陀区金沙江路 1516 弄",
          phone: "12",
          emile: "12",
        },
        {
          id: 9,
          type: "c",
          date: "2016-05-03",
          name: "王小虎3",
          address: "上海市普陀区金沙江路 1516 弄",
          phone: "12",
          emile: "12",
        },
      ],

合并方法

 objectSpanMethod({ row, column, rowIndex }) {
     
      // 需要合并单元格对应的列
      const arr = ["type", "date", "name", "address", "phone"];
      if (arr.indexOf(column.property) !== -1) {
        // 需要校验的字段
        const data = arr.slice(0, arr.indexOf(column.property) + 1);
        // 每一条第一次出现时对应的索引
        const first = this.tableData.findIndex((item) => {
          return data.every((v) => item[v] === row[v]);
        });
        if (rowIndex === first) {
          // 同一条出现的条数
          const rowspan = this.tableData.filter((item) => {
            return data.every((v) => item[v] === row[v]);
          }).length;
          return {
            rowspan,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },

线上演示地址 https://code.juejin.cn/pen/7273025496567250985