vue.js学习之递归组件
编程学习 2021-07-04 19:19www.dzhlxh.cn编程入门
最近学习vue.js有一段时间了，使用vue做了一套后台管理系统，其中使用最多就是递归组件，也因为自己对官方文档的不熟悉使得自己踩了不少坑，所以今天写出来和大家一起分享。有需要的朋友们可以参考借鉴，狼蚁网站SEO优化来一起看看吧。
递归组件
组件在它的模板内可以递归地调用自己，只有当它有 name 选项时才可以。 在官网这句话就是关键定义组件是一定要有name属性。按照这个思路我们开动吧。
实现最终效果图：
模拟数据格式如下：
var data = [{
"id": "1",
"data": {
"menuName": "项目管理",
"menuCode": "",
},
"childTreeNode": [{
"data": {
"menuName": "项目",
"menuCode": "BusProject",
},
"childTreeNode": []
}, {
"data": {
"menuName": "我的任务",
"menuCode": "BusProject",
},
"childTreeNode": []
}, {
"data": {
"menuName": "人员周报",
"menuCode": "BusProject",
},
"childTreeNode": []
}]
}, {
"id": "2",
"data": {
"menuName": "数据统计",
"menuCode": "BusClock",
},
"childTreeNode": []
}, {
"id": "3",
"data": {
"menuName": "人事管理",
"menuCode": "",
},
"childTreeNode": []
}, {
"id": "4",
"data": {
"menuName": "基础管理",
"menuCode": "",
},
"childTreeNode": []
}]
html我们思路按照ul里面套li，无限ul套li，标题用div元素包裹，
<li>
<div @click='toggle'>
<i v-if='isFolder' class="fa " :class="[open?'fa-folder-open':'fa-folder']"></i>
<!--isFolder判断是否存在子级改变图标-->
<i v-if='!isFolder' class="fa fa-file-text"></i> {{model.data.menuName}}
</div>
<ul v-show="open" v-if='isFolder'>
<items v-for='cel in model.childTreeNode' :model='cel'></items>
</ul>
</li>
官方文档里面写的递归组件强调了使用name属性
export default {
name: 'items',
props: ['model'],
components: {},
}
按照vue的思想，不操作Dom树，我们定义两个变量，一个显示隐藏子菜单(open),一个存不存子菜单修改图标(isFolder)。
data() {
return {
open: false,
isFolder: true
}
}
利用vue计算属性动态改变isFolder的值，修改图标，判断存在不子级和子级长度
computed: {
isFolder() {
return this.model.childTreeNode && this.model.childTreeNode.length
}
}
显示隐藏事件
methods: {
toggle: function() {
if(this.isFolder) {
this.open = !this.open
}
}
}
写到这里我们已经做完一个树形菜单了如下，最终样式就留给大家自己去实现了我在贴出完整代码供大家参考。
<template>
<li>
<div @click='toggle'>
<i v-if='isFolder' class="fa " :class="[open?'fa-folder-open':'fa-folder']"></i>
<!--isFolder判断是否存在子级改变图标-->
<i v-if='!isFolder' class="fa fa-file-text"></i> {{model.data.menuName}}
</div>
<ul v-show="open" v-if='isFolder'>
<items v-for='cel in model.childTreeNode' :model='cel'></items>
</ul>
</li>
</template>
<script type="text/javascript">
export default {
name: 'items',
props: ['model'],
components: {},
data() {
return {
open: false,
isFolder: true
}
},
computed: {
isFolder: function() {
return this.model.childTreeNode && this.model.childTreeNode.length
}
},
methods: {
toggle: function() {
if(this.isFolder) {
this.open = !this.open
}
},
}
}
</script>
公司最开始是使用easyui做的管理系统，我接手后用vue完整模仿了一些easyui的东西，狼蚁网站SEO优化就是在树形菜单基础上模仿出了树形表格，下图为完整图
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流