vue编写带有递归组件的树控件示例代码

最近在vue项目中，我们遇到了一些需要用到树控件的部分，比如导航目录是不确定的，所以一定要用树结构，不管导航目录有多少级，都可以自动显示。一开始我以为element-ui有树控件，不需要自己写，就可以直接调用。后来发现打电话后风格不可控，加东西特别困难，不能满足项目需要。给了自己一个《凉凉》，然后翻看vue官网发现有递归组件。一开始我写了两个组件，互相调用，可以写。后来我退了。如果项目需要用5棵树，我要写10个组件，风格超级恶心控制不住，于是查了各种资料，本土的都试了。本机js不能在vue项目中使用，因为它是用js创建的。它违反了vue数据驱动视图的原理，所以通过，再听《凉凉》。当然，如果小伙伴对原生js写的树结构感兴趣，我可以贴出来。那我们先来看看vue版本。后来，我一直在思考“递归”这个词。递归意味着调整自己。我只能写一个组件来调用自己。也许我可以。以后，我可以。

vue版本的树控制

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title树形结构2/title/head body div id=' app ' tree :文件夹=' trees ' : select=' select '/tree/div脚本src=' http :3359 cdn。jsdelivr。net/NPM/Vue/dist/Vue。script Vue脚本。组件(' tree '，{ name:'tree '，template:`ul li v-for='文件夹中的项目span @click='select(item)'级目录1 ',显示：false，children:[ { id:'1-1 '，标签:'1.1目录}，{ id:'1-2 '，标签:'1.2目录}，{ id:'1-3 '，标签:'1.3目录}，] }，{ id:2，label:'1级目录2 '，show:false }，{ id:3，label:'1级目录3 '，show:false，children:[ { id:'3-1 '，label:'3.1目录}，{ id:'3-2 '，标签:'3.2目录，show:false，children:[ { id:'3-2-1 '，label:'3.2.1目录}，{ id:'3-2-2 '，标签:'3.2.2目录}，{ id:'3-2-3 '，标签:'3.2.3目录} ] } ] }，{ id:4，label:'1级目录4 '，show:false，children:[ { id:'4-1 '，label:'4.1目录}，{ id:'4-2 '，标签:'4.2目录，show:false，children:[ { id:'4-2-1 '，label:'4.2.1目录} ] } ] }，{ id:5，label:'1级目录5 '，show:false，children:[ { id:'5-1 '，label:'5.1目录，显示：false，children:[ { id:'5-1-1 '，标签:'5.1.1目录}，{ id:'5-1-2 '，标签:'5.1.2目录，show:false，children:[ { id:'5-1-2-1 '，label:'5.1.2.1目录}，] } ] }，{ id:'5-2 '，标签:'5.2目录，show:false } ] }，] }，方法： { ClickHandler(){ console。日志(23333)；},选择（数据){ console.log(数据);} },挂载(){控制台。日志(这个。树木)；} })/脚本/正文/html看下结果

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

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

模板ul class='dataBaseTree' li v-for='(项目，索引)在文件夹：键=' index ' span @ click=' select(项目)' : class=' { ' active ' : current tid==item。id } ' I class=' folderIcon ' v-if='项。儿童的图标：icon='夏拉' v-if=' item . show '/图标图标：icon='夏拉2英寸v-else/icon/导出默认{ name:'DatabaseTree '，prop :[' folder '，' select '，' current tid ']，data(){ return { addparams 3360 { label : ' '，children:[] }，note data : { children :[]} } } }，computed: <.mapgetter([' catalog '])}，methods : { }/script style lang=' SCS '作用域数据库树{填充-左侧：12%；线高：40 pxul { padding-left :12%；线高：40 pxLi { span { display : in-block；左填充：23%;高度：100%;宽度：120%;color : # abababfont-size :14 px；相对位置：光标：指针；悬停{背景： # EDF0 F5} .folderIcon { color : # BCBCBCBC；绝对位置：top :-1px；left :22 px } } } } Li { position : relative span { display : inline-block；左填充left :40 px font-size :14 px；高度：100%;宽度：120%;光标：指针；相对位置：right :25 xtop :-2px；color: # ababab:悬停{背景： # EDF0 F5} .title icon { color : # c3c3 font-size :16 px；绝对位置：top :12 pxleft 336016 px }。folderIcon { color : # BCBCBCBC；绝对位置：top :-1px；left:22px} }。活动{ background : # EDF0 F5 } } }/style vue版的就到这里了

下面贴一个原生射流研究…版的，感兴趣的小伙伴可以继续往下看

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title/head dy脚本var tree=[ { id:1，label: ' 1级目录1 '，children:[ { id:'1-1 '，label:'1.1目录}，{ id:'1-2 '，标签:'1.2目录}，{ id:'1-3 '，标签:'1.3目录}，] }，{ id:2，label:'1级目录2 '，}，{ id:3，label:'1级目录3 ',儿童：[ { id:'3-1 '，标签:'3.1目录}，{ id:'3-2 '，标签:'3.2目录，children:[ { id:'3-2-1 '，标签:'3.2.1目录}，{ id:'3-2-2 '，标签:'3.2.2目录}，{ id:'3-2-3 '，标签:'3.2.3目录} ] } ] }，{ id:4，label:'1级目录4 ',儿童：[ { id:'4-1 '，标签:'4.1目录}，{ id:'4-2 '，标签:'4.2目录，children:[ { id:'4-2-1 '，标签:'4.2.1目录} ] } ] }，{ id:5，label:'1级目录5 ',儿童：[ { id:'5-1 '，标签:'5.1目录，children:[ { id:'5-1-1 '，标签:'5.1.1目录}，{ id:'5-1-2 '，标签:'5.1.2目录，children:[ { id:'5-1-2-1 '，标签:'5.1.2.1目录}，] } ] }，{ id:'5-2 '，标签:'5.2目录' } ] }, ]; var render=function(tree) { if(！树)返回null var ul=文档。创建元素(' ul ')；for(var I=0；我树。长度；I){ var Li=文档。创建元素(' Li ')//创建跨度标签var span=文档。创建元素(“span”)；span.innerText=tree[i].标签；李。append child(span)；如果（树[i].子对象){ var sub=render(tree[I]).儿童);李。append child(sub)；} ul。阑尾(李)；}返回ul }；文件。尸体。innerHTMl=文件。尸体。appendchild(render(tree))；/脚本/正文/html看下结果

总结

以上所述是小编给大家介绍的某视频剪辑软件用递归组件写树形控件的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！