雖然官網(wǎng)給了樹形控件怎么寫谷炸,我相信大家也不一定能看懂,我想說樹形控件的基本是需要遞歸相同的組件?而反復(fù)調(diào)用組件只需要組件的name值一樣便可反復(fù)調(diào)用拓颓,閑話不說現(xiàn)在貼代碼描孟。
<template>
<gs :list="listdata" ></gs>
</template>
<script>
export default {
? ? data(){
? ? ? return{listdata:[{name:1,id:1,child:[{name:3,id:3,child:[]}]},{name:2,id:2,child:[]}]}
? ? ?},
? ? components:{
? ? ? ? ? ? gs:{
? ? ? ? ? ? name:gs,
? ? ? ? ? ? temlate:`<ul style="padding-left:1em">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li v-for="li in list">{li.name}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <gs :list="li.child" ></gs>
? ? ? ? ? ? ? ? ? ? ? ? ? ?</ul>`,
? ? ? ? ? ? ?props:['list']
? ? ? ? ? ? ? }
? ? }
}
以上基本的樹形結(jié)構(gòu)就出來了?因為都是組件組合組件的方式如果進行樹形操作的話最好是用vuex來對節(jié)點進行記錄并操作如果進行異步加載子節(jié)點數(shù)據(jù)的話也是可以進行的匿醒。