el-table使用 span-method 合并某个字段相同的单元格

需求：table表格中需要把id相同的数据合并
思路： 使用 span-method 方法实现跨行合并，此方法的参数是一个对象，包含row 行、 column 列、rowIndex 当前行、columnIndex 当前列号；该函数会返回一个包含两个元素的数组(第一个元素代表 rowspan，第二个元素代表 colspan)，也可以是一个key为 rowspan 和 colspan 的对象。

image.png

数据格式

const tableData = [
    {
        id: '1',
        date: new Date(),
        price: '100.2',
        name: "苹果",
        address: "上海市普陀区金沙江路 1518 弄",
    },
    {
        id: '1',
        date: new Date(),
        price: '10.2',
        name: "苹果",
        address: "上海市普陀区金沙江路 1518 弄",
    },
    {
        id: '2',
        date: new Date(),
        price: '100',
        name: "香蕉",
        address: "上海市普陀区金沙江路 1517 弄",
    },
    {
        id: '2',
        date: new Date(),
        price: '1000',
        name: "香蕉2",
        address: "上海市普陀区金沙江路 1517 弄",
    },
    {
        id: '2',
        date: new Date(),
        price: '10',
        name: "香蕉",
        address: "上海市普陀区金沙江路 1517 弄",
    },
    {
        id: '3',
        date: new Date(),
        price: '1300',
        name: "草莓",
        address: "上海市普陀区金沙江路 1519 弄",
    },
    {
        id: '4',
        date: new Date(),
        price: '102130.5',
        name: "哈密瓜",
        address: "上海市普陀区金沙江路 1516 弄",
    },
    {
        id: '4',
        date: new Date(),
        price: '102130.5',
        name: "哈密瓜",
        address: "上海市普陀区金沙江路 1516 弄",
    },
    {
        id: '4',
        date: new Date(),
        price: '102130.5',
        name: "哈密瓜",
        address: "上海市普陀区金沙江路 1516 弄",
    },
    {
        id: '4',
        date: new Date(),
        price: '102130.5',
        name: "哈密瓜",
        address: "上海市普陀区金沙江路 1516 弄",
    },
]

export default tableData

1.使用计算属性对哪行需要合并进行处理

  computed: {
    tableDataColumn() {
      const obj = {};
      this.tableData.forEach((v, i) => {
        const id = v.id;
        if (obj[id]) {
          obj[id].push(i);
        } else {
          obj[id] = [];
          obj[id].push(i);
        }
      });

      return obj;
    },
  },

2.实现方法

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex > 0 && row.id === this.tableData[rowIndex - 1].id) {
          return {
            rowspan: 0,
            colspan: 0,
          };
        } else {
          const id = row.id;
          const rows = this.tableDataColumn[id];
          const length = rows.length;
          return {
            rowspan: length,
            colspan: 1,
          };
        }
      }
    },