这篇文章主要介绍“vue如何使用递归组件实现一个树形控件”，在日常操作中，相信很多人在vue如何使用递归组件实现一个树形控件问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”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
Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。
到此，关于“vue如何使用递归组件实现一个树形控件”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
