el-table封装合并单元格-简单粗暴

    // 合并单元格
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
    // 这里是你需要合并第几列的单元格
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
        const merge = this.flitterData(this.statisticsData.list)
        const _row = merge.one[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    flitterData(arr) {
      const spanOneArr = []
      let concatOne = 0
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1)
        } else {
    // 只需要修改一下的flowName字段即可
          if (item.flowName === arr[index - 1].flowName) {
            spanOneArr[concatOne] += 1
            spanOneArr.push(0)
          } else {
            spanOneArr.push(1)
            concatOne = index
          }
        }
      })
      return {
        one: spanOneArr
      }
    },

特殊情况处理后端的数据

后端数据

 const arr = [
    {
      id: 123,
      order: [
        {
          title: "标题1"
        },
        {
          title: "标题1"
        }
      ]
    },
    {
      id: 333,
      order: [
        {
          title: "标题4"
        },
        {
          title: "标题5"
        }
      ]
    }
  ];

前端需要数据

const list = [
    {
      abc: 123,
      title: "标题1"
    },
    {
      abc: 123,
      title: "标题2"
    },
    {
      abc: 333,
      title: "标题3"
    },
    {
      abc: 333,
      title: "标题4"
    }
  ];

前端返回的两条数据，针对这种数据结构，前端需要4条数据才能做合并

  const disposList = arr
    .map(item => {
      return item.order.map(subItem => ({
        ...item,
        ...subItem
      }));
    })
    .flat();
  最终得到的disposList就是需要的数据