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

时间：2021-05-26

最近在vue项目中遇到需要用树形控件的部分，比如导航目录是不确定的，所以必须要用树形结构，不管导航目录有几级，都可以自动显示出来，我一开始觉得element-ui有树形控件，不需要自己写，调用就可以了，后来才发现，调用完事之后，样式不可控，而且要加东西特别困难，无法满足项目需求，于是，一首《凉凉》送给自己，后来去翻vue官网，发现居然有递归组件，一开始我写了两个组件，互相调用，可以写出来，后来返现，如果项目要用到5棵树，我要写10个组件，而且样式控制起来超级恶心，于是我就各种查资料，原生的也试过了，原生js写的并不能在vue项目中使用，因为它用js创造的元素，违反了vue数据驱动视图的原则，所以pass，又听一遍《凉凉》，当然如果有小伙伴对原生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 :folder = "trees" :select = "select"></tree> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> Vue.component('tree', { name:"tree", template:`<ul> <li v-for = "item in folder"> <span @click = "select(item)">{{ item.label }}</span> <tree v-if = "item.children" :folder = "item.children" :select = "select"></tree> </li> </ul>`, props:["folder","select"], }) // <tree v-if = "item.children" :folder = "item.children"></tree> var app = new Vue({ el:"#app", data:{ msg:"hello world", trees: [ { id:1, label:"1级目录1", show:false, children:[ { id:"1-1", label:"1.1目录" }, { id:"1-2", label:"1.2目录" }, { id:"1-3", label:"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", label:"3.2目录", show:false, 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, label:"1级目录4", show:false, children:[ { id:"4-1", label:"4.1目录" }, { id:"4-2", label:"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目录", show:false, children:[ { id:"5-1-1", label:"5.1.1目录" }, { id:"5-1-2", label:"5.1.2目录", show:false, children:[ { id:"5-1-2-1", label:"5.1.2.1目录" }, ] } ] }, { id:"5-2", label:"5.2目录", show:false } ] }, ] }, methods:{ clickHandler(){ console.log(23333); }, select(data){ console.log(data); } }, mounted(){ console.log(this.trees); } }) </script></body></html>

看下结果

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

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

<template> <ul class = "dataBaseTree"> <li v-for = "(item,index) in folder" :key = "index"> <span @click = "select(item)" :class = "{'active':currentId == item.id}"> <i class = "folderIcon" v-if = "item.children"> <icon :icon = "'xiala'" v-if = "item.show"></icon> <icon :icon = "'xiala2'" v-else></icon> </i> {{ item.label }} </span> <el-collapse-transition> <DatabaseTree v-if = "item.children && item.show" :folder = "item.children" :select = "select" :currentId = "currentId"></DatabaseTree> </el-collapse-transition> </li> </ul></template><script> import { mapGetters , mapActions} from 'vuex'; export default{ name:"DatabaseTree", props:["folder","select","currentId"], data(){ return{ addParams:{ label:"", children:[] }, noteData:{ children:[] } } }, computed:{ ...mapGetters(["catalog"]) }, methods:{} }</script><style lang="scss" scoped> .dataBaseTree{ padding-left:12%; line-height:40px; ul{ padding-left:12%; line-height:40px; li{ span{ display:inline-block; padding-left:23%; height:100%; width:120%; color:#ababab; font-size:14px; position: relative; cursor: pointer; &:hover{ background: #EDF0F5; } .folderIcon{ color:#BCBCBC; position: absolute; top:-1px; left:22px; } } } } li{ position: relative; span{ display:inline-block; padding-left:40px; font-size:14px; height:100%; width:120%; cursor: pointer; position: relative; right:25px; top:-2px; color:#ababab; &:hover{ background: #EDF0F5; } .titleIcon{ color:#C3C3C3; font-size:16px; position: absolute; top:12px; left:16px; } .folderIcon{ color:#BCBCBC; position: absolute; top:-1px; left:22px; } } .active{ background: #EDF0F5; } } }</style>

vue版的就到这里了

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

<!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><body> <script> var tree=[ { id:1, label:"1级目录1", children:[ { id:"1-1", label:"1.1目录" }, { id:"1-2", label:"1.2目录" }, { id:"1-3", label:"1.3目录" }, ] }, { id:2, label:"1级目录2", }, { id:3, label:"1级目录3", children:[ { id:"3-1", label:"3.1目录" }, { id:"3-2", label:"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, label:"1级目录4", children:[ { id:"4-1", label:"4.1目录" }, { id:"4-2", label:"4.2目录", children:[ { id:"4-2-1", label:"4.2.1目录" } ] } ] }, { id:5, label:"1级目录5", children:[ { id:"5-1", label:"5.1目录", children:[ { id:"5-1-1", label:"5.1.1目录" }, { id:"5-1-2", label:"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)); </script></body></html>

看下结果

总结

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章