element-ui 格式化樹形數組在table組件中展示（單元格合並）

最近做的項目涉及到很多單元格合並問題，element-ui組件對於單元格合並的處理雖然很靈活，但是需要事先計算好每個單元格合並的rowspan和colspan，直接在span-method屬性中計算實現起來有點困難，所以我拿到列表后先把每條數據的需要合並的rowspan計算出來然后直接在span-method屬性中返回即可。上代碼：

export const merge = function(
  colArr,
  list
) {
  var allProps = [];
  colArr.forEach((props, index) => {
    allProps.push(...props);
    list = getLevel(props, allProps, list);
  });
  return list;
};

//組裝層
function getLevel(props, allProps, list) {
  var rowKey = {};
  for (var item of list) {
    let propInfo = getPropStr(allProps, item);
    if (rowKey[propInfo.key]) {
      rowKey[propInfo.key].children.push(item);
    } else {
      let obj = propInfo;
      obj.children = [item];
      rowKey[propInfo.key] = obj;
    }
  }
  let info = [];
  for (var key in rowKey) {
    rowKey[key].children.forEach((item, index) => {
      if (index == 0) {
        item = Object.assign(
          item,
          getMergeInfo(props, rowKey[key].children.length)
        );
      } else {
        item = Object.assign(item, getMergeInfo(props, 0));
      }
      info.push(item);
    });
  }
  return info;
}

//獲取合並信息
function getMergeInfo(props, num) {
  let obj = {};
  props.forEach(item => {
    obj[item + "_merge"] = {
      rowspan: num,
      colspan: 1
    };
  });
  return obj;
}
// 把屬性的值拼接在一起,並和屬性的值一起返回。
function getPropStr(props, info) {
  let obj = {};
  let propStr = props.map(item => {
    obj[item] = info[item];
    return info[item];
  });
  obj.key = propStr.toString();
  return obj;
}

　span-method合並函數：

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (row[column.property + "_merge"]) {
        return row[column.property + "_merge"];
      } else {
        return { rowspan: 1, colspan: 1 };
      }
    },

　　

導進去直接調用：

var colArr = [["id", "grade"], ["class"]];
    var list = [
      { id: 1, grade: 1, class: 1, name: "張三" },
      { id: 1, grade: 1, class: 1, name: "李四" },
      { id: 1, grade: 1, class: 2, name: "王五" },
      { id: 1, grade: 1, class: 2, name: "找六" },
      { id: 2, grade: 2, class: 7, name: "張三_1" },
      { id: 2, grade: 2, class: 7, name: "李四_1" },
      { id: 2, grade: 2, class: 3, name: "王五_1" },
      { id: 2, grade: 2, class: 3, name: "找六_1" }
    ];
this.tableDate = merge(colArr, list);

　

 

備注：colArr是要合並的層級。示例中id和grade是第一次，class是第二層。
　　　　list是數據列表。