导言：

  搞了个后端对接若依前端，对接菜单管理时候懵懵的就搞完了，也是搞了很久。记一下逻辑和要注意的东西，以后做想似的能有个改造思路。

逻辑：

主要是要把后端传过的数组列表做成类似

这样的，所以要转格式

后端传过来的数据:

const data = [{ id: 1, name: '根节点1', parentId: null },{ id: 2, name: '根节点2', parentId: null },{ id: 3, name: '子节点1-1', parentId: 1 },{ id: 4, name: '子节点1-2', parentId: 1 },{ id: 5, name: '子节点2-1', parentId: 2 },{ id: 6, name: '子节点1-1-1', parentId: 3 },{ id: 7, name: '子节点1-1-2', parentId: 3 }
];

转换成el-table要的

const tree = [{id: 1,name: '根节点1',parentId: null,children: [{id: 3,name: '子节点1-1',parentId: 1,children: [{ id: 6, name: '子节点1-1-1', parentId: 3 },{ id: 7, name: '子节点1-1-2', parentId: 3 }]},{ id: 4, name: '子节点1-2', parentId: 1 }]},{id: 2,name: '根节点2',parentId: null,children: [{ id: 5, name: '子节点2-1', parentId: 2 }]}
];

若依是定义了一个方法来实现转换的过程，大致思路：

• 第一次循环用于建立节点之间的父子关系映射。
• 第二次循环用于识别根节点并初始化树的结构。
• 第三次循环则利用递归构建完整的树形结构，确保所有节点的层级关系正确。

讲实话我还是懵懵的，模糊理解

1.把扁平数组每个数据看成点，两点之间连线

2.分别把两点连线是父节点的一端找到

3.对应接起来

没什么实感..

实现

1.index.vue

请求后端，获得数据，调用handleTree转换格式，绑到表格上

/** 查询菜单列表 */getList() {this.loading = true;listMenu(this.queryParams).then(response => {console.log("请求信息response：",response);this.menuList = this.handleTree(response.data, "id","parentUID");console.log("请求信息this.menuList：",this.menuList);this.loading = false;});},

2.handleTree()转换

在src\utils\ruoyi.js里.

把扁平化的数组数据结构（通常是包含父子关系的节点）转换为一个树形结构

/*** 构造树型结构数据* @param {*} data 数据源           // 输入的原始数据，是一个扁平结构的数组* @param {*} id id字段 默认 'id'   // 数据中表示唯一标识符的字段名，默认为 'id'* @param {*} parentId 父节点字段 默认 'parentId'  // 数据中表示父节点的字段名，默认为 'parentId'* @param {*} children 孩子节点字段 默认 'children'  // 用来存储子节点的字段名，默认为 'children'*/
export function handleTree(data, id = 'id', parentId = 'parentId', children = 'children') {// 配置对象，定义了 id 字段、parentId 字段、children 字段的名称let config = {id: id || 'id',                      // id 标识字段，默认为 'id'  parentId: parentId || 'parentId',     // 父节点标识字段，默认为 'parentId'childrenList: children || 'children'  // 子节点列表字段，默认为 'children'};// 存储每个父节点对应的子节点数组var childrenListMap = {}; // 存储所有节点的 id 及其节点对象，用于快速查找var nodeIds = {};  // 最终的树形结构数组，存储根节点var tree = [];// 第一次循环：构建 childrenListMap 和 nodeIdsfor (let d of data) {let parentId = d[config.parentId];    // 获取当前节点的父节点 idif (childrenListMap[parentId] == null) {childrenListMap[parentId] = [];     // 如果该父节点还没有子节点数组，则初始化}nodeIds[d[config.id]] = d;            // 保存当前节点的 id 和节点本身，方便快速查找childrenListMap[parentId].push(d);     // 将当前节点加入到其父节点对应的子节点数组中}// 第二次循环：找出根节点，并添加到 tree 数组中for (let d of data) {let parentId = d[config.parentId];     // 获取当前节点的父节点 idif (nodeIds[parentId] == null ) {       // 如果当前节点的父节点不存在，说明它是根节点tree.push(d);                        // 将根节点加入到树结构中}}// 第三次循环：递归遍历根节点的子节点，并构造完整的树形结构for (let t of tree) {adaptToChildrenList(t);                // 递归处理每个根节点，生成其子节点结构}/*** 递归地将子节点添加到对应的父节点中* @param {*} o 当前正在处理的节点对象*/function adaptToChildrenList(o) {if (childrenListMap[o[config.id]] !== null) {o[config.childrenList] = childrenListMap[o[config.id]];   // 将子节点数组添加到当前节点的 children 字段}if (o[config.childrenList]) {                               // 如果当前节点有子节点for (let c of o[config.childrenList]) {adaptToChildrenList(c);                                 // 递归处理每个子节点}}}// 返回最终构造好的树形结构return tree;
}

注意的点

1.handleTree()

这方法开始定义了config对象,其中把每个字段的父节点id,子节点的名字都规范好了，如果后端这俩传来的不一样的话在调用handleTree()时对应传过去就行,不然不一样用了默认的话会报错。

2.后端数据

后端传过来的每条数据都应该带上parentId字段，不管有没有，不然也会报错

3.el-table绑定

绑定的是本身的id,不是父节点的，绑父节点的会报键重复

<el-tablev-if="refreshTable"v-loading="loading":data="menuList"row-key="id":default-expand-all="isExpandAll":tree-props="{children: 'children', hasChildren: 'hasChildren'}">