vue用递归组件写树形控件的实例代码

最近在vue项目中遇到需要用树形控件的部分，比如导航目录是不确定的，所以必须要用树形结构，不管导航目录有几级，都可以自动显示出来，我一开始觉得element-ui有树形控件，不需要自己写，调用就可以了，后来才发现，调用完事之后，样式不可控，而且要加东西特别困难，无法满足项目需求，于是，一首《凉凉》送给自己，后来去翻vue官网，发现居然有递归组件，一开始我写了两个组件，互相调用，可以写出来，后来返现，如果项目要用到5棵树，我要写10个组件，而且样式控制起来超级恶心，于是我就各种查资料，原生的也试过了，原生js写的并不能在vue项目中使用，因为它用js创造的元素，违反了vue数据驱动视图的原则，所以pass，又听一遍《凉凉》，当然如果有小伙伴对原生js写的树形结构感兴趣我也可以贴出来，那么我们先来看看vue版的吧，后来，我就一直在默念“递归”这个词，递归不就是自己调自己吗，我可以只写一个组件，来调用自己啊，也许应该可以，后来，经过试验终于成功了，下面我贴上代码

vue版的树形控件

<Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width,initial-scale=1.0"> <Meta http-equiv="X-UA-Compatible" content="ie=edge"> 树形结构2

看下结果

这里写图片描述

当然我用的全局组件，如果用vue-cli搭建的环境是一样的，引入组件就可以了，但是一定要注意，组件内必须要用name属性，而且name的名称要和组件名称（组件标签名称）一致才可以

贴一个项目中用的模板吧，相当于做笔记了

@H_301_15@
import { mapGetters,mapActions} from 'vuex';
export default{
name:"DatabaseTree","select","currentId"],data(){
return{
addParams:{
label:"",children:[]
},noteData:{
children:[]
}
}
},computed:{
...mapGetters(["catalog"])
},methods:{}
}

vue版的就到这里了

下面贴一个原生js版的，感兴趣的小伙伴可以继续往下看

<Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width,initial-scale=1.0"> <Meta http-equiv="X-UA-Compatible" content="ie=edge"> Document @H_301_15@ var tree=[ { id:1,children:[ { id:"1-1",label:"1.1目录" },{ id:"1-2",label:"1.2目录" },{ id:"1-3",label:"1.3目录" },] },{ id:2,},{ id:3,children:[ { id:"3-1",label:"3.1目录" },{ id:"3-2",children:[ { id:"3-2-1",label:"3.2.1目录" },{ id:"3-2-2",label:"3.2.2目录" },{ id:"3-2-3",label:"3.2.3目录" } ] } ] },{ id:4,children:[ { id:"4-1",label:"4.1目录" },{ id:"4-2",children:[ { id:"4-2-1",label:"4.2.1目录" } ] } ] },{ id:5,children:[ { id:"5-1",children:[ { id:"5-1-1",label:"5.1.1目录" },{ id:"5-1-2",children:[ { id:"5-1-2-1",label:"5.1.2.1目录" },] } ] },{ id:"5-2",label:"5.2目录" } ] },]; var render = function(tree) { if (!tree) return null var ul = document.createElement('ul'); for(var i = 0; i < tree.length;i++){ var li = document.createElement('li') // 创建span标签 var span = document.createElement('span'); span.innerText = tree[i].label; li.appendChild(span); if(tree[i].children){ var sub = render(tree[i].children); li.appendChild(sub); } ul.appendChild(li); } return ul }; document.body.innerHTML = ''; document.body.appendChild(render(tree));

看下结果

这里写图片描述

总结

以上所述是小编给大家介绍的vue用递归组件写树形控件的实例代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

vue用递归组件写树形控件的实例代码

vue版的树形控件

总结

猜你在找的Vue相关文章