element-ui 菜单悬停样式(js如何构造elementUI树状菜单的数据结构详解)
类别:编程学习 浏览量:817
时间:2022-04-02 16:21:28 element-ui 菜单悬停样式
js如何构造elementUI树状菜单的数据结构详解背景说明
elementUI中自带树状菜单,就是数据结构有点复杂,偏向json风格。
数据库中菜单数据是二维表格,通过parentPk定义上下级,是list型。
需要把list转换成tree的结构。
elementUI树状菜单的数据结构
每个节点有4个属性,id、label、newVal、children数组;
通过children数组包含关系标示上下级。
var treeData={ id: 1, label: '一级 1', newVal: "", children: [{ id: 4, label: '二级 1-1', newVal: "", children: [{ id: 9, label: '三级 1-1-1', newVal: "", }, { id: 10, label: '三级 1-1-2', newVal: "", children:[{ id: 4444, label: '四级 1-1-1-4', newVal: "", }] }] },{ id:22, label:'二级 22', newVal:'' }] }
数据库返回的list
var itemlist =[ {itemCode:'11', itemName:'材料11',itemType:'2',parentPk:'1'}, {itemCode:'111', itemName:'材料111',itemType:'3',parentPk:'11'}, {itemCode:'1111', itemName:'材料1111',itemType:'3',parentPk:'111'}, {itemCode:'1112', itemName:'材料1112',itemType:'3',parentPk:'111'} ]
设计思路
用递归方法;
- 从list中遍历,找parentPk是当前节点的id的对象,组装成node,放到当前节点的children数组;同时,把list的对象删除。
- 对新的node,递归执行找子节点的过程。
- 退出条件:list为空或者循环list完毕。
具体代码
//root节点 全局对象,因为不同的递归执行,要访问的一个tree对象 var itemtree ={ id:'1', label:'物料名称_整机', children:[] } //数据库返回的菜单list 全局对象,因为不同的递归执行,要访问的一个list对象 var itemlist =[ {itemCode:'11', itemName:'材料11',itemType:'2',parentPk:'1'}, {itemCode:'12', itemName:'材料12',itemType:'2',parentPk:'1'}, {itemCode:'111', itemName:'材料111',itemType:'3',parentPk:'11'}, {itemCode:'1111', itemName:'材料1111',itemType:'3',parentPk:'111'}, {itemCode:'1112', itemName:'材料1112',itemType:'3',parentPk:'111'} ] function buildtree(itemtreenode,itemlist){ if (itemlist.length===0) { console.log('条件结束') return } var j=0 /*!!注意循环变量j必须定义为局部变量,否则默认全局变量,会导致子节点丢失*/ // var len=0 for(j=0,len=itemlist.length;j<len;j++){ console.log(new Date(),'j==>:',j,'len==>:',len,itemtreenode,itemlist) if (itemtreenode.id===itemlist[j].parentPk){ var node={id:itemlist[j].itemCode,label:itemlist[j].itemName,children:[]} itemtreenode.children.push(node) // itemlist.splice(j,1) /*!! 没有删除list元素,否则会导致后续引用错误。代码不是很完美,一时没想到完美方法*/ buildtree(node,itemlist) } } console.log('循环结束') } console.log('begin') buildtree(itemtree,itemlist) console.log(itemtree)
代码执行结果
可以看到组装树是正确的。
总结
ps:和设计方案对比,代码不是很完美,list中被引用的元素没有成功移除;移除后,后边会报错。暂时没找到好方法,对性能有点影响。
树data转list代码
与此相反的操作。
var treeData={ id: 1, label: '一级 1', newVal: "", children: [{ id: 4, label: '二级 1-1', newVal: "", children: [{ id: 9, label: '三级 1-1-1', newVal: "", }, { id: 10, label: '三级 1-1-2', newVal: "", children:[{ id: 4444, label: '四级 1-1-1-4', newVal: "", }] }] },{ id:22, label:'二级 22', newVal:'', children:[{id:'2-2-1',label:'三级221',newVal:'',children:[],}] }] } var exp=undefined var itemlist=[] function tree2list(itemnode){ if(typeof(itemnode)=="undefined"){ console.log('返回:',itemnode) return } if(itemnode.children && itemnode.children.length>0){ var i=0 for(i=0;i<itemnode.children.length;i++){ itemnode.children[i].parentPk=itemnode.id console.log(itemnode.children[i]) itemlist.push(itemnode.children[i]) this.tree2list(itemnode.children[i]) } } } console.log('begin') tree2list(treeData,itemlist) console.log(itemlist)
到此这篇关于js如何构造elementUI树状菜单的数据结构的文章就介绍到这了,更多相关js构造elementUI树状菜单内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vueelementui三级菜单(vue+element ui实现锚点定位)
- vueelementui动态表格(Vue Element前端应用开发之常规的JS处理函数)
- elementui和vue详解(Vue+Element UI实现概要小弹窗的全过程)
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
- vue加element ui弹窗(Vue中ElementUI分页组件Pagination的使用方法)
- elementui的el-popover修改样式不生效的解决(elementui的el-popover修改样式不生效的解决)
- vue elementui 按钮样式修改(vue+elementui 实现新增和修改共用一个弹框的完整代码)
- vueelementui组件生成页面(Vue Element前端应用开发之树列表组件)
- vue3.0全家桶教程elementui学习(vite+vue3.0+ts+element-plus快速搭建项目的实现)
- vue element 表格上拉加载数据(Vue组件库ElementUI实现表格加载树形数据教程)
- elementui自定义坐标(element-ui 上传图片后标注坐标点)
- vue elementui 公共列表组件(Vue Element-ui表单校验规则实现)
- vue按需引入elementui组件(vue ElementUI实现异步加载树)
- element-ui如何关闭表单验证(ElementUI实现el-form表单重置功能按钮)
- vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)
- elementui多个组件怎么使用(ElementUI在实际项目使用步骤详解)
- 三分71 生死战爆发 篮网旧将丁威迪今天成奇兵,助队赢球(三分71生死战爆发)
- 《红 雄安》系列广播剧第一集 水上奇兵雁翎队(雄安系列广播剧第一集)
- 小说 小伙穿越成刘备,用现代知识指挥作战,众谋士都看呆了(小伙穿越成刘备)
- 解析葡萄牙6-1瑞士 进攻多点开花,贡萨洛-拉莫斯一战成名(解析葡萄牙6-1瑞士)
- 这支 奇兵队 腕大 有范儿还各怀绝技,毒贩杀人犯见了都要仓皇而逃(这支奇兵队腕大)
- 雄藩崛起 奇兵队与幕末长州藩军事改革(雄藩崛起奇兵队与幕末长州藩军事改革)
热门推荐
- pyqt5代码实例(pyqt5实现登录界面的模板)
- php商城支付接口(php实现银联商务公众号+服务窗支付的示例代码)
- html和css制作导航条(使用Html+Css实现简易导航栏功能导航栏遇到鼠标切换背景颜色)
- CSS3动画属性animation
- 用python简单实现登录功能(使用python的pexpect模块,实现远程免密登录的示例)
- mysql数据类型
- php nginx 底层执行流程(nginx/apache/php隐藏http头部版本信息的实现方法)
- navicatformysql怎么激活(一文读懂navicat for mysql基础知识)
- asp.net中Session的操作
- docker 加入k8s吗(k8s和Docker关系简单说明)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9