vue横向树结构_vue树形结构的实现
1. 主要代碼
使用單文件組件的方式, 需要一個(gè)父組件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. 坑點(diǎn)
使用遞歸組件時(shí), 子組件必須在全局注冊(cè), 否則在調(diào)用時(shí)會(huì)提示引用錯(cuò)誤
必須設(shè)置遞歸終止條件, 否則會(huì)導(dǎo)致內(nèi)存溢出報(bào)錯(cuò)
3. TODO
本篇主要實(shí)現(xiàn)了從數(shù)據(jù)到視圖的數(shù)據(jù)展示的實(shí)現(xiàn), 下一篇將實(shí)現(xiàn)從視圖到數(shù)據(jù)的操作數(shù)據(jù)的實(shí)現(xiàn)
總結(jié)
以上是生活随笔為你收集整理的vue横向树结构_vue树形结构的实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： linux kvm dhcp配置,《转》
- 下一篇： array 前端面试题_web前端开发面