vue遞歸組件實(shí)現(xiàn)樹形結(jié)構(gòu)

第vue遞歸組件實(shí)現(xiàn)樹形結(jié)構(gòu)效果圖如下：

三、遞歸來實(shí)現(xiàn)？

通過組件自身的name名字來實(shí)現(xiàn)組件自身的遞歸調(diào)用.

父組件中：

template

div

tree:title="":list="list.children":detph="0"/tree

/div

/template

script

importtreefrom'../components/tree'

exportdefault{

name:"Home",

components:{

tree

data:function(){

return{

list:{

name:"酒店",

children:[

{

name:"經(jīng)濟(jì)",

children:[

{

name:"如家",

children:[

{

name:"長江路-如家"

},

{

name:"望江路-如家"

}

]

},

{

name:"7天",

children:[

{

name:"長江路-7天"

},

{

name:"望江路-7天"

}

]

}

]

},

{

name:"舒適",

children:[

{

name:"智選假日",

children:[

{

name:"臥龍路-智選假日"

},

{

name:"望江路-智選假日"

}

]

},

{

name:"全季",

children:[

{

name:"臥龍路-全季"

},

{

name:"建設(shè)路-全季"

}

]

}

]

},

{

name:"商務(wù)",

children:[

{

name:"中方商務(wù)",

children:[

{

name:"臥龍路-中方商務(wù)"

},

{

name:"望江路-中方商務(wù)"

}

]

},

{

name:"錦江之星",

children:[

{

name:"人民路-錦江之星"

},

{

name:"新華路-錦江之星"

}

]

}

]

}

]

}

};

methods:{}

/script

stylescoped

.ww{

margin-left:20px;

.hh{

font-size:10px;

/style

子組件：

!--

--

template

div

div:

!--顯示隱藏--

div@click="getData"

!--這里呢如果為真的話就顯示那么就是減號(hào)否則的話就是加號(hào)--

span{{isShow'-':'+'}}/span{{title}}/div

!--那么在這里我們就需要改成和item.children--

divv-if="isShow"

tree

:title=""

:list="item.children"

v-for="(item,index)inlist"

:key="index"

:detph="detph+1"

!--每次遞增1--

/tree

/div

/div

/div

/template

script

exportdefault{

name:"tree",

components:{},

data:function(){

return{

isShow:false

};

props:{

//接收標(biāo)題

title:{

type:String

//default:"標(biāo)題"

},

//接收一整個(gè)數(shù)組

list:{

type:Array

},

//用來接收層數(shù)

detph:{

type:Number

}

//計(jì)算屬性用來接收我們的層數(shù)

computed:{

getDetph(){

return`transform:translate(${this.detph*20}px)`;

}

methods:{

getData: