后端返回parentId，前端处理成children嵌套数据

rouyi 的 vuetree函数结合elementui  el-table组件使用

把有parentId和id结构的数据处理成children嵌套数据，字段名称不一致，可以设置。

vuetree函数：

/**
 
 * 构造树型结构数据
 
 * @param {*} data 数据源
 
 * @param {*} id id字段 默认 'id'
 
 * @param {*} parentId 父节点字段 默认 'parentId'
 
 * @param {*} children 孩子节点字段 默认 'children'
 
 */
 
export function handleTree(data, id, parentId, children) {
 
  let config = {
 
    id: id || 'id',
 
    parentId: parentId || 'parentId',
 
    childrenList: children || 'children'
 
  };
 
 
 
  var childrenListMap = {};
 
  var nodeIds = {};
 
  var tree = [];
 
 
 
  for (let d of data) {
 
    let parentId = d[config.parentId];
 
    if (childrenListMap[parentId] == null) {
 
      childrenListMap[parentId] = [];
 
    }
 
    nodeIds[d[config.id]] = d;
 
    childrenListMap[parentId].push(d);
 
  }
 
 
 
  for (let d of data) {
 
    let parentId = d[config.parentId];
 
    if (nodeIds[parentId] == null) {
 
      tree.push(d);
 
    }
 
  }
 
 
 
  for (let t of tree) {
 
    adaptToChildrenList(t);
 
  }
 
 
 
  function adaptToChildrenList(o) {
 
    if (childrenListMap[o[config.id]] !== null) {
 
      o[config.childrenList] = childrenListMap[o[config.id]];
 
    }
 
    if (o[config.childrenList]) {
 
      for (let c of o[config.childrenList]) {
 
        adaptToChildrenList(c);
 
      }
 
    }
 
  }
 
  return tree;
 
}

<template>
 
    <el-table
 
      v-if="refreshTable"
 
      v-loading="loading"
 
      :data="typeList"
 
      row-key="typeId"
 
      :default-expand-all="isExpandAll"
 
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
 
     >
 
      <el-table-column label="主键" align="center" prop="typeId" />
 
      <el-table-column label="类型编码" align="center" prop="typeCode" />
 
     ......
 
    el-table>
template>
 
export default{
 
data(){
    return{
        //一维数组：
        testdata:[
            {"id": 30035, "name": "分类1"},
            {"id": 30036, "name": "分类2"},
            {"id": 30037, "name": "分类3"},
            {"id": 30040, "name": "分类1-1", "parentId": 30035},
            {"id": 30041, "name": "分类2-1", "parentId": 30036},
            {"id": 30042, "name": "分类1-1-1", "parentId": 30040},
            {"id": 30043, "name": "分类1-1-2", "parentId": 30040},
            {"id": 30044, "name": "分类1-1-2-1", "parentId": 30043}
          ]
    }
},
methods:{
  getList() {
 
      this.loading = true;
 
      listType(this.queryParams).then(response => {
 
        this.typeList = this.handleTree(response.rows, 'typeCode', 'parentCode')
 
        this.total = response.total;
 
        this.loading = false;
 
      });
 
    },
}
}