快捷導(dǎo)航

VUE遞歸樹形實現(xiàn)多級列表

更新時間：2022年07月15日 11:25:37 作者：賴賴賴先生

這篇文章主要為大家詳細介紹了VUE遞歸樹形實現(xiàn)多級列表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了VUE遞歸樹形實現(xiàn)多級列表，供大家參考，具體內(nèi)容如下

什么是遞歸?

簡單來說就是在組件中內(nèi)使用組件本身。

為什么要用遞歸？

如果出現(xiàn)很多下拉菜單，同級，分級數(shù)據(jù)，層級混雜，可以使用v-for的嵌套循環(huán)不就完事了。對，沒毛病這樣的話也可以做，但是如果數(shù)據(jù)又多加了【很多】級分類呢；使用v-for也能實現(xiàn)，但是代碼可能會比較雜或混亂！也不適合后期的維護，這個時候呢，我們就可以使用我們所說道的【遞歸組件】了，使用遞歸組件，無論你的數(shù)據(jù)怎么增加我們都不用改動我們的代碼。

先看效果：

1、創(chuàng)建兩個文件

父組件tree.vue 子組件tree-detail

父組件代碼：

<template>
? ? <div id="tree">
? ? ? ? <treedetail
? ? ? ?:title="list.name"?? ?//把值傳給子組件
? ? ? ?:list="list.children" //把值傳給子組件
? ? ? ? :num='0'
? ? ? ? >
? ? ? ? </treedetail>
? ? </div>
</template>
<script>

/**
?* 模擬一個樹形結(jié)構(gòu)圖
?*/
const list = {
? name: "電子產(chǎn)品",
? children: [
? ? {
? ? ? name: "電視",
? ? ? children: [
? ? ? ? {
? ? ? ? ? name: "philips",
? ? ? ? ? children: [
? ? ? ? ? ? { name: "philips-A" },
? ? ? ? ? ? { name: "philips-B" },
? ? ? ? ? ? { name: "philips-C" }
? ? ? ? ? ]
? ? ? ? },
? ? ? ? {
? ? ? ? ? name: "Tcl",
? ? ? ? ? children: [
? ? ? ? ? ? { name: "Mac Air" },
? ? ? ? ? ? { name: "Mac Pro" },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "ThinlPad",
? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? name: "ThinlPad-A",
? ? ? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? ? ? { name: "ThinlPad-A-a" },
? ? ? ? ? ? ? ? ? ? { name: "ThinlPad-A-b" },
? ? ? ? ? ? ? ? ? ? { name: "ThinlPad-A-c" }
? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? { name: "ThinlPad-B" },
? ? ? ? ? ? ? ? { name: "ThinlPad-C" },
? ? ? ? ? ? ? ? { name: "ThinlPad-D" }
? ? ? ? ? ? ? ]
? ? ? ? ? ? }
? ? ? ? ? ]
? ? ? ? },
? ? ? ? { name: "海興" }
? ? ? ]
? ? },
? ? {
? ? ? name: "電腦",
? ? ? children: [{ name: "acer" }, { name: "聯(lián)想" }, { name: "惠普" }]
? ? },
? ? {
? ? ? name: "可穿戴的設(shè)備",
? ? ? children: [
? ? ? ? {
? ? ? ? ? name: "手環(huán)",
? ? ? ? ? children: [
? ? ? ? ? ? { name: "華為B5手環(huán)" },
? ? ? ? ? ? { name: "小米手環(huán)" },
? ? ? ? ? ? { name: "iphone手環(huán)" }
? ? ? ? ? ]
? ? ? ? }
? ? ? ]
? ? }
? ]
};
import treedetail from '../tree/treedetail'?
export default{
? ? name:'tree',
? ? data(){
? ? ? ? return{list}
? ? },
? ? components:{treedetail} ?//注冊子組件
}
</script>

子組件代碼：

<template>
<div id="treedetail" >
? ? <div class="treedetail" @click="btn()" :style="indent"> ?//btn是用來切換顯示隱藏
? ? ? ? <span>{{flag ? '-' :'+'}}</span>?
? ? ? ? <span>{{title}}</span> //接收到的標題
? ? ? ? </div> ?
? ? ?<div ?v-if="flag"> ?//這里加顯示隱藏也是必要的
? ? ? ? <treedetail ?//treedetail這里的命名要跟父組件注冊子組件名稱一樣，不然無法顯示。DIV就無法顯示
? ? ? ? v-for="(item,index) in list"?
? ? ? ? :key="index"
? ? ? ? :title="item.name"
? ? ? ? :list='item.children' ?//渲染列表下的列表數(shù)據(jù)
? ? ? ? :num='num + 1' //這里的作用應(yīng)該是分清層級。
? ? ? ? ></treedetail>
? ? </div> ??
??
? ? </div>
</template>
<script>
export default {
? ? name:'treedetail',
? ? props:{
? ? ? ? title:{
? ? ? ? ? ? type:String,
? ? ? ? ? ? default:'名稱'
? ? ? ? },
? ? ? ? list:{type:Array},
? ? ? ? num:{
? ? ? ? ? ? type:Number,
? ? ? ? ? ? default:0
? ? ? ? }
? ? },
? ? data(){
? ? ? ? return{
? ? ? ? ? ? flag:false
? ? ? ? }
? ? },
? ? methods:{
? ? ? ? btn(){
? ? ? ? ? ? this.flag=!this.flag
? ? ? ? }
? ? },
? ? computed:{
? ? ? ? indent(){
? ? ? ? ? ? return `transform: translate(${this.num*20}px)`;?
? ? ? ??
? ? ? ? ? ??
? ? ? ? }
? ? }

}
</script>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: