带有上下级关系的数据改为树形菜单的数据

简介: 带有上下级关系的数据改为树形菜单的数据

要转换成树形菜单的格式,首先原数据的格式要有自身ID与上级ID如:

其中id为自身ID,pid为上级ID,默认一级列表的上级ID为0;

let treeid = 0 //初始为一级列表,默认id为0
let treedata = []
let list = {
id: 1,
name: "名称",
pid: 0,
    //所要更改的数据
}
changeTree(list,treeid,reedata)
const changeTree = (datalist, id, newArr) => {
  for (let i = 0; i < datalist.length; i++) {
    if (datalist[i].pid == id) {
      newArr.push(datalist[i]);
    }
  }
  for (let i = 0; i < newArr.length; i++) {
    newArr[i].children = [];
    changeTree(scenicList.value, newArr[i].id, newArr[i].children);
    if (newArr[i].children.length == 0) {
      delete newArr.children;
    }
  }
};
目录
相关文章
|
JavaScript
fastadmin表格列表内部自定义按钮
fastadmin表格列表内部自定义按钮
428 0
fastadmin表格列表内部自定义按钮
|
1月前
|
前端开发 JavaScript 开发者
HTML 中的全局属性和局部属性是否可以相互覆盖?
【10月更文挑战第27天】HTML中的全局属性和局部属性在正常使用情况下不会相互覆盖,但在涉及CSS样式和JavaScript操作等特殊情况下,可能会出现类似覆盖的效果。开发者需要理解属性的功能、作用域和优先级,遵循最佳实践,以确保HTML文档的结构清晰、功能正常且易于维护。
|
4月前
|
前端开发 数据库
Tree树形控件--删除分级菜单中的某一个、删除后的树形结构仍然是对应目录下的展开效果、二次删除确认、删除成功提示
这篇文章提供了一种删除Tree树形控件中分级菜单项的方法,包括实现流程、代码示例和操作效果展示,涉及二次确认和删除成功提示。
|
5月前
|
前端开发 JavaScript
【定制需求】el-tree 树形控件实现:每级可单独选择,选择父级不选中子集,子集全部选中不自动选中父级,手写按钮可支持子集全选,以及取消子集全选,el-tree 树形控件取消父子级联动选择
【定制需求】el-tree 树形控件实现:每级可单独选择,选择父级不选中子集,子集全部选中不自动选中父级,手写按钮可支持子集全选,以及取消子集全选,el-tree 树形控件取消父子级联动选择
364 0
|
5月前
|
定位技术 API 数据格式
Element UI【详解】el-cascader 级联选择器 - 行政区划选择(可以选择任意一级),限定选择范围,获取并解析选中的节点
Element UI【详解】el-cascader 级联选择器 - 行政区划选择(可以选择任意一级),限定选择范围,获取并解析选中的节点
688 0
|
JSON JavaScript 数据格式
Elementui Tree 树形控件,将勾选选中的值放在list集合里面提交
Elementui Tree 树形控件,将勾选选中的值放在list集合里面提交
82 1
|
容器
Echarts实战案例代码(30):同一个id空间Tab按钮显示不同图表防止叠加的解决方案
Echarts实战案例代码(30):同一个id空间Tab按钮显示不同图表防止叠加的解决方案
104 0
MPAndroidChart_并列柱状图,及如何实现点击隐藏掉不需要的条目。
在比赛中遇到了MP的并列柱状图,看网上对这方面记录并不是很多,所以今天就做一个教程吧。
208 0
MPAndroidChart_并列柱状图,及如何实现点击隐藏掉不需要的条目。
|
小程序 开发者
小程序__02--navigationBarTitleText配置子页面标题,依旧显示默认标题,子页面配置不显示
navigationBarTitleText配置子页面标题,依旧显示默认标题,子页面配置不显示
Element-ui表格的列隐藏显示会使表格头数据错乱或者表格头样式变大
Element-ui表格的列隐藏显示会使表格头数据错乱或者表格头样式变大
470 0