vant TreeSelect 多级菜单
时间: 2023-06-22 15:29:59 浏览: 211
Vant的`TreeSelect`组件可以实现多级菜单的选择,通过传入树形结构的数据来生成多级菜单。以下是一个使用`TreeSelect`组件实现多级菜单的示例代码:
```html
<template>
<van-tree-select
:items="items"
:main-active-index="mainActiveIndex"
:active-id="activeId"
@item-click="onItemClick"
@nav-click="onNavClick"
/>
</template>
<script>
export default {
data() {
return {
items: [
{
text: '选项1',
id: 1,
children: [
{
text: '选项1-1',
id: 11,
children: [
{
text: '选项1-1-1',
id: 111
},
{
text: '选项1-1-2',
id: 112
}
]
},
{
text: '选项1-2',
id: 12,
children: [
{
text: '选项1-2-1',
id: 121
},
{
text: '选项1-2-2',
id: 122
}
]
}
]
},
{
text: '选项2',
id: 2,
children: [
{
text: '选项2-1',
id: 21,
children: [
{
text: '选项2-1-1',
id: 211
},
{
text: '选项2-1-2',
id: 212
}
]
},
{
text: '选项2-2',
id: 22,
children: [
{
text: '选项2-2-1',
id: 221
},
{
text: '选项2-2-2',
id: 222
}
]
}
]
}
],
mainActiveIndex: 0,
activeId: ''
};
},
methods: {
onItemClick(item) {
this.activeId = item.id;
},
onNavClick(index) {
this.mainActiveIndex = index;
}
}
};
</script>
```
在这个示例中,我们传入了一个树形结构的数据数组`items`,每个节点包含了`text`和`id`属性,以及可选的`children`属性。在`TreeSelect`组件中,我们设置了`items`属性来传入数据,同时监听了`item-click`和`nav-click`事件来处理选中的节点和导航栏的点击。在模板中,我们使用了`main-active-index`和`active-id`属性来控制导航栏和选中的节点。
需要注意的是,由于`TreeSelect`组件的数据格式比较特殊,如果需要从其他数据源中获取数据,可能需要对数据进行转换。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)