递归组件
组件在它的模板内可以递归地调用自己,只有当它有 name 选项时才可以。 在官网这句话就是关键定义组件是一定要有name属性。按照这个思路我们开动吧。
实现最终效果图:
模拟数据格式如下
:统计","menuCode": "BusClock","childTreeNode": []
},{
"id": "3","data": {
"menuName": "人事管理",{
"id": "4","data": {
"menuName": "基础管理","childTreeNode": []
}]
html我们思路按照ul里面套li,无限ul套li,标题用div元素包裹,
{{model.data.menuName}}
官方文档里面写的递归组件强调了使用name属性
按照vue的思想,不操作Dom树,我们定义两个变量,一个显示隐藏子菜单(open),一个存不存子菜单修改图标(isFolder)。
利用vue计算属性动态改变isFolder的值,修改图标,判断存在不子级和子级长度
显示隐藏事件
写到这里我们已经做完一个树形菜单了如下,最终样式就留给大家自己去实现了我在贴出完整代码供大家参考。
{{model.data.menuName}}