<template>
<div class="demo">
<div class="top">
<ul>
<li @click="one">回到頂級</li>
<li v-for="item of parents" :key="item.value" @click="jump(item)">{{item.text}}</li>
</ul>
<van-button type="primary" @click="submit" size="mini">确定</van-button>
</div>
<van-radio-group v-model="radio">
<div v-for="item of list" :key='item.value'>
<van-radio :name="item.value"></van-radio><span @click="next(item)">{{item.text}}</span>
</div>
</van-radio-group>
</div>
</template>
<script>
export default {
data() {
return {
radio: '',
tree: [
{
value: '一級 1',
text: '一級 1',
children: [
{
value: '二級 1-1',
text: '二級 1-1',
children: [
{
value: '三級 1-1-1',
text: '三級 1-1-1',
children: [
{ value: '四級 1-1-1-1', text: '四級 1-1-1-1' },
{ value: '四級 1-1-1-2', text: '四級 1-1-1-2' }
]
},
{ value: '三級 1-1-2', text: '三級 1-1-2' }
]
},
{
value: '二級 1-2',
text: '二級 1-2',
children: [
{ value: '三級 1-2-1', text: '三級 1-2-1' },
{ value: '三級 1-2-2', text: '三級 1-2-2' }
]
}
]
},
{
value: '一級 2',
text: '一級 2',
children: [
{
value: '二級 2-1',
text: '二級 2-1',
children: [
{ value: '三級 2-1-1', text: '三級 2-1-1' },
{ value: '三級 2-1-2', text: '三級 2-1-2' }
]
},
{ value: '二級 2-2', text: '二級 2-2' }
]
},
{
value: '一級 3',
text: '一級 3',
children: [
{ value: '二級 3-1', text: '二級 3-1' },
{ value: '二級 3-2', text: '二級 3-2' }
]
}
],
list: [], // 本級節點
parents: [] // 所有的父級節點
}
},
created() {
this.list = this.tree
},
methods: {
submit() {
console.log('選中的節點', this.radio)
},
one() {
this.list = this.tree
this.parents = []
this.radio = ''
},
jump(item) {
console.log(item.children, this.list)
if (JSON.stringify(item.children) !== JSON.stringify(this.list)) {
this.radio = ''
this.list = item.children
// 設定面包屑導航
const parents = this.getParents(this.tree, item.value)
this.parents = parents.reverse()
} else {
alert('目前已經是' + item.text)
}
},
next(item) {
if (item.children) {
this.radio = ''
this.list = item.children
const parents = this.getParents(this.tree, item.value)
this.parents = parents.reverse()
} else {
alert('已經是最後一級')
}
},
// 找到所有父級
getParents(tree, value) {
for (const item of tree) {
if (item.value === value) return [item]
if (item.children) {
const node = this.getParents(item.children, value)
if (node !== undefined) return node.concat(item)
}
}
}
}
}
</script>
<style lang="less">
.demo {
.top {
display: flex;
justify-content: space-between;
> ul {
display: flex;
li {
font-size: 10px;
margin-right: 10px;
}
}
}
.van-radio-group {
> div {
> .van-radio {
display: inline-block;
}
}
}
}
</style>
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI0gTMx81dsQWZ4lmZf1GLlpXazVmcvwFciV2dsQXYtJ3bm9CX9s2RkBnVHFmb1clWvB3MaVnRtp1XlBXe0xCMy81dvRWYoNHLwEzX5xCMx8FesU2cfdGLwMzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5SM5cjM0MjNhBDNhJGMxQGOyYzX2AzNwEDM1IzLcVDMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.png)
1、點選節點跳轉至下一級節點
2、點選節點前的radio可以選中目前節點,點選确定列印節點value