VUE遞迴樹形實現多級列表

2022-07-15 14:03:45

本文範例為大家分享了VUE遞迴樹形實現多級列表，供大家參考，具體內容如下

什麼是遞迴?

簡單來說就是在元件中內使用元件本身。

為什麼要用遞迴？

如果出現很多下拉式選單，同級，分級資料，層級混雜，可以使用v-for的巢狀迴圈不就完事了。對，沒毛病這樣的話也可以做，但是如果資料又多加了【很多】級分類呢；使用v-for也能實現，但是程式碼可能會比較雜或混亂！也不適合後期的維護，這個時候呢，我們就可以使用我們所說道的【遞迴元件】了，使用遞迴元件，無論你的資料怎麼增加我們都不用改動我們的程式碼。

先看效果：

1、建立兩個檔案

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

父元件程式碼：

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

/**
 * 模擬一個樹形結構圖
 */
const list = {
  name: "電子產品",
  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: "聯想" }, { name: "惠普" }]
    },
    {
      name: "可穿戴的裝置",
      children: [
        {
          name: "手環",
          children: [
            { name: "華為B5手環" },
            { name: "小米手環" },
            { name: "iphone手環" }
          ]
        }
      ]
    }
  ]
};
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'  //渲染列表下的列表資料
        :num='num + 1' //這裡的作用應該是分清層級。
        ></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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

VUE遞迴樹形實現多級列表

什麼是遞迴?

熱門文章