vant多级tree
时间: 2023-11-25 17:46:57 浏览: 214
Vant picker 多级联动操作
vant提供了TreeSelect组件,可以实现多级树形选择。使用方法如下:
1. 引入TreeSelect组件
```javascript
import { TreeSelect } from 'vant';
```
2. 在模板中使用TreeSelect组件
```html
<van-tree-select
:items="items"
:main-active-index.sync="mainActiveIndex"
:active-id.sync="activeId"
:max="3"
@click-nav="onClickNav"
@click-item="onClickItem"
/>
```
其中,`items`是树形数据,`mainActiveIndex`是当前激活的一级菜单的索引,`activeId`是当前选中的节点的id,`max`是最大可选层数。
3. 在methods中定义点击事件
```javascript
methods: {
onClickNav({ index }) {
this.mainActiveIndex = index;
},
onClickItem({ id }) {
this.activeId = id;
},
},
```
阅读全文