1. 主要代碼

使用單文件組件的方式, 需要一個父組件treeMenu, 和子組件treeItem

1.1 父組件treeMenu.vue

:nodes="treeData">

export default {

name: 'treeMenu',

data: () => {

return {

treeData: {

label: 'china',

nodes: [{

label: 'hubei',

nodes: [{

label: 'wuhan'

},

{

label: 'yichang'

},

{

label: 'jinzhou'

}]

}]

}

}

}

}

1.2 子組件treeItem.vue

class="tree-item-label"

:class="{active: isActive}"

@click="activeItem"

>{{nodes.label}}

v-for="(item, index) in nodes.nodes"

:key="index"

:nodes="item">

export default {

name: 'treeItem',

props: ['nodes'],

data () {

return {

}

},

computed: {

isEnd () {

console.log(this.nodes.nodes)

return this.nodes.nodes && this.nodes.nodes.length

}

},

methods: {

activeItem: () => {

}

}

}

2. 坑點

使用遞歸組件時, 子組件必須在全局注冊, 否則在調用時會提示引用錯誤

必須設置遞歸終止條件, 否則會導致內存溢出報錯

3. TODO

本篇主要實現了從數據到視圖的數據展示的實現, 下一篇將實現從視圖到數據的操作數據的實現

總結

以上是生活随笔為你收集整理的vue横向树结构_vue树形结构的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。