vue用遞歸組件寫樹形控件的實例代碼

來源：懂視網責編：小采時間：2020-11-27 22:11:21

vue用遞歸組件寫樹形控件的實例代碼

vue用遞歸組件寫樹形控件的實例代碼:最近在vue項目中遇到需要用樹形控件的部分，比如導航目錄是不確定的，所以必須要用樹形結構，不管導航目錄有幾級，都可以自動顯示出來，我一開始覺得element-ui有樹形控件，不需要自己寫，調用就可以了，后來才發現，調用完事之后，樣式不可控，而且要加東西

推薦度：

點擊下載本文 文檔為doc格式

導讀vue用遞歸組件寫樹形控件的實例代碼:最近在vue項目中遇到需要用樹形控件的部分，比如導航目錄是不確定的，所以必須要用樹形結構，不管導航目錄有幾級，都可以自動顯示出來，我一開始覺得element-ui有樹形控件，不需要自己寫，調用就可以了，后來才發現，調用完事之后，樣式不可控，而且要加東西

最近在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>

看下結果

這里寫圖片描述