vuejs实现递归树型菜单组件
前言
前段时间使用vue做了一套后台管理系统,其中使用最多就是递归组件,也因为自己对官方文档的不熟悉使得自己踩了不少坑,今天写出来和大家一起分享。
递归组件
组件在它的模板内可以递归地调用自己,只有当它有name选项时才可以。在官网这句话就是关键定义组件是一定要有name属性。
模拟数据格式如下:
[ { "id":"1", "menuName":"基础管理", "menuCode":"10", "children":[ { "menuName":"用户管理", "menuCode":"11" }, { "menuName":"角色管理", "menuCode":"12", "children":[ { "menuName":"管理员", "menuCode":"121" }, { "menuName":"CEO", "menuCode":"122" }, { "menuName":"CFO", "menuCode":"123" }, { "menuName":"COO", "menuCode":"124" }, { "menuName":"普通人", "menuCode":"124" } ] }, { "menuName":"权限管理", "menuCode":"13" } ] }, { "id":"2", "menuName":"商品管理", "menuCode":"" }, { "id":"3", "menuName":"订单管理", "menuCode":"30", "children":[ { "menuName":"订单列表", "menuCode":"31" }, { "menuName":"退货列表", "menuCode":"32", "children":[] } ] }, { "id":"4", "menuName":"商家管理", "menuCode":"", "children":[] } ]
html我们思路按照ul里面套li,无限ul套li,标题用div元素包裹,
{{model.menuName}}
官方文档里面写的递归组件强调了使用name属性
需要注意的是,由父组件传递过来的数据要先进行深拷贝哦
深拷贝:把props赋值到data里,赋值的同时深拷贝一下,data里JSON.parse(JSON.stringify(这个值就行了)),data值自己命名
exportdefault{ name:'treeMenu', //props:['model'],//这样和下面效果一样 props:{ model:{type:Object}, }, components:{}, }
按照vue的思想,不操作Dom树,我们定义两个变量,一个显示隐藏子菜单(open),一个存不存子菜单修改图标(isFolder)。
data(){ return{ open:false,//一个显示隐藏子菜单(open) //isFolder:true//这个不要写死,运用计算属性计算看存不存在 } },
利用vue计算属性动态改变isFolder的值,修改图标,判断存在不子级和子级长度
computed:{ isFolder(){//利用vue计算属性动态改变isFolder的值,修改图标,判断存在不子级和子级长度 //returnthis.model.children&&this.model.children.length//和下面效果一样 letisFolder=false if(this.model.children&&this.model.children.length){ isFolder=true; }else{ isFolder=false; } returnisFolder } },
显示隐藏事件
methods:{ toggle(){ if(this.isFolder){ this.open=!this.open } } },
写到这里我们已经做完一个树形菜单了
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。