vant怎样实现存在2级和3级的展开选择
时间: 2023-08-30 12:12:31 浏览: 66
在 Vant 中,可以使用 `van-tree-select` 组件实现存在2级和3级的展开选择。
首先,需要在页面中引入 `van-tree-select` 组件:
```html
<van-tree-select :items="items" @change="onChange" />
```
然后,在对应的 Vue 实例中定义 `items` 数据,用于渲染树形结构。
```javascript
export default {
data() {
return {
items: [
{
text: '一级选项1',
id: 1,
children: [
{
text: '二级选项1',
id: 11,
children: [
{
text: '三级选项1',
id: 111
},
{
text: '三级选项2',
id: 112
}
]
},
{
text: '二级选项2',
id: 12
}
]
},
{
text: '一级选项2',
id: 2
}
]
};
},
methods: {
onChange(selectedItems) {
console.log(selectedItems);
}
}
};
```
其中,每个选项都包含 `text` 和 `id` 属性,用于显示选项文本和标识选项,`children` 属性用于定义子选项。
最后,在 `onChange` 方法中获取选中的选项数据。通过 `selectedItems` 参数可以获取到一个数组,包含所有被选中的选项。
```javascript
onChange(selectedItems) {
console.log(selectedItems);
}
```
这样,就可以实现存在2级和3级的展开选择了。