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;
}

　导进去直接调用：

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" }
    ];
merge(colArr, list)

　

备注：colArr是要合并的层级。示例中id和grade是第一次，class是第二层。
　　　　list是数据列表。