递归组件
组件在它的模板内可以递归地调用自己，只有当它有 name 选项时才可以。 在官网这句话就是关键定义组件是一定要有name属性。按照这个思路我们开动吧。
实现最终效果图：
模拟数据格式如下
：rush:js;">
var data = [{
"id": "1","data": {
"menuName": "项目管理","menuCode": "",},"childTreeNode": [{
"data": {
"menuName": "项目","menuCode": "BusProject","childTreeNode": []
},{
"data": {
"menuName": "我的任务",{
"data": {
"menuName": "人员周报","childTreeNode": []
}]
},{
"id": "2","data": {
"menuName": "数据统计","menuCode": "BusClock","childTreeNode": []
},{
"id": "3","data": {
"menuName": "人事管理",{
"id": "4","data": {
"menuName": "基础管理","childTreeNode": []
}]
html我们思路按照ul里面套li，无限ul套li，标题用div元素包裹，
rush:js;">
{{model.data.menuName}}
官方文档里面写的递归组件强调了使用name属性
rush:js;">
export default {
name: 'items',props: ['model'],components: {},}
按照vue的思想，不操作Dom树，我们定义两个变量，一个显示隐藏子菜单(open),一个存不存子菜单修改图标(isFolder)。
rush:js;">
data() {
return {
open: false,isFolder: true
}
}
利用vue计算属性动态改变isFolder的值，修改图标，判断存在不子级和子级长度
rush:js;">
computed: {
isFolder() {
return this.model.childTreeNode && this.model.childTreeNode.length
}
}
显示隐藏事件
rush:js;">
methods: {
toggle: function() {
if(this.isFolder) {
this.open = !this.open
}
}
}
写到这里我们已经做完一个树形菜单了如下，最终样式就留给大家自己去实现了我在贴出完整代码供大家参考。
rush:xhtml;">
{{model.data.menuName}}
公司最开始是使用easyui做的管理系统，我接手后用vue完整模仿了一些easyui的东西，下面就是在树形菜单基础上模仿出了树形表格，下图为完整图
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
