vue用递归组件写树形控件的实例代码
网络编程 2021-07-04 16:46www.168986.cn编程入门
最近在vue项目中遇到需要用树形控件的部分，比如导航目录是不确定的，所以必须要用树形结构，狼蚁网站SEO优化狼蚁SEO长沙网络推广给大家带来了vue用递归组件写树形控件的实例代码，需要的朋友参考下吧
最近在vue项目中遇到需要用树形控件的部分，比如导航目录是不确定的，所以必须要用树形结构，不管导航目录有几级，都可以自动显示出来，我一开始觉得element-ui有树形控件，不需要自己写，调用就可以了，后来才发现，调用完事之后，样式不可控，而且要加东西特别困难，无法满足项目需求，于是，一首《凉凉》送给自己，后来去翻vue官网，发现居然有递归组件，一开始我写了两个组件，互相调用，可以写出来，后来返现，如果项目要用到5棵树，我要写10个组件，而且样式控制起来超级恶心，于是我就各种查资料，原生的也试过了，原生js写的并不能在vue项目中使用，因为它用js创造的元素，违反了vue数据驱动视图的原则，所以pass，又听一遍《凉凉》，如果有小伙伴对原生js写的树形结构感兴趣我也可以贴出来，那么我们先来看看vue版的吧，后来，我就一直在默念“递归”这个词，递归不就是自己调自己吗，我可以只写一个组件，来调用自己啊，也许应该可以，后来，经过试验终于成功了，狼蚁网站SEO优化我贴上代码
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./npm/vue/dist/vue.js"></script>
<script>
Vue.ponent('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:[]
}
}
},
puted:{
...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;
:-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;
:-2px;
color:#ababab;
&:hover{
background: #EDF0F5;
}
.titleIcon{
color:#C3C3C3;
font-size:16px;
position: absolute;
:12px;
left:16px;
}
.folderIcon{
color:#BCBCBC;
position: absolute;
:-1px;
left:22px;
}
}
.active{
background: #EDF0F5;
}
}
}
</style>
vue版的就到这里了
狼蚁网站SEO优化贴一个原生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用递归组件写树形控件的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！
上一篇：微信小程序表单弹窗实例
下一篇：如何理解Vue的v-model指令的使用方法
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程：电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示：编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程