Table组件合并单元格-让你头疼的问题

麻烦麻烦很麻烦 相信很多小伙伴都遇到过这样的问题，element ui 中 table组件渲染表格，需要对数据进行处理，比如后端返回了一个树状结构的数据，需要做扁平化处理，还要进行单元格合并的计算，这是我的解决方法，假如小伙伴们有更好的方法，欢迎评论区留言！！！

先来看看效果图吧！

数据结构/格式如下：

拿到这样的数据，需要你去渲染表格，是不是头皮发麻?

解决思路分两步：

• 第一步：数据扁平化处理
• 第二步：计算合并单元格行列数

先来说说数据扁平化处理吧！就是转化成table组件可以渲染的格式

:span-method是计算合并行/列的方法

那么如何将一个树状数据扁平化处理呢？foreach、reduce、map都可以

话不多说，直接上代码：

reduce/map方法

    let arr = this.scoreDate.evalItemList;
    let _list = arr.reduce((list, cur) => [
      ...list, 
      ...cur.childItemGroupList.reduce((l, c) => [
        ...l,
        // ...c.childItemList.map(i => Object.assign(i, c, cur))
        ...c.childItemList.reduce((i,n) => [
          ...i,
          {
           ...cur,
           ...c,
           ...n
          }
        ], [])
      ], [])
    ], []);
    console.log(_list);
复制代码

foreach方法

这边直接将数据进行处理，拿到需要合并单元格的行数

let row = 0;
    let i, j;
    this.scoreDate.evalItemList.forEach((item) => {
      const objI = {};
      for (let key in item) objI[key] = [row];
      if (row > 0) {
        for (let key in item) {
          this.tableList[i].rowData[key][1] = row - i;
        }
      }
      i = row;
      item.childItemGroupList.forEach((item2) => {
        const objJ = {};
        for (let key in item2) objJ[key] = [row];

        if (row > 0) {
          for (let key in item2) {
            this.tableList[j].rowData[key][1] = row - j;
          }
        }
        j = row;

        item2.childItemList.forEach((item3) => {
          row++;
          this.tableList.push({
            ...item,
            ...item2,
            ...item3,
            rowData: {
              ...objI,
              ...objJ,
            },
          });
        });
      });
    });
    console.log(this.tableList, "表格");
    
复制代码

:span-method 方法如下

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      let rowspan = row.rowData[column.property];
      if (rowspan) {
        if (rowspan[0] !== rowIndex) return [0, 0];
        else if (rowspan.length === 1)
          return [this.tableList.length - rowIndex, 1];
        else return [rowspan[1], 1];
      }
    },
    
复制代码

这是我的方法，小伙伴有没有更简便的方法呀！！评论区见