js
复制代码
<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>
