vuejs实现递归树型菜单组件

2023-09-17 23:18:05 297

前言

前段时间使用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元素包裹，

官方文档里面写的递归组件强调了使用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
}
}
},

写到这里我们已经做完一个树形菜单了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

vuejs实现递归树型菜单组件

热门推荐

随机推荐