van-tree-select三级联动示例代码
时间: 2023-11-11 19:05:34 浏览: 91
以下是一个van-tree-select三级联动示例代码:
```html
<van-tree-select
:items="items"
:main-active-index.sync="activeIndex"
:active-id.sync="activeId"
@click-nav="onClickNav"
@click-item="onClickItem"
>
<van-tree-select-item
v-for="(item, index) in items"
:key="index"
:title="item.text"
:disabled="item.disabled"
>
<van-tree-select-item
v-for="(subItem, subIndex) in item.children"
:key="subIndex"
:title="subItem.text"
:disabled="subItem.disabled"
>
<van-tree-select-item
v-for="(subSubItem, subSubIndex) in subItem.children"
:key="subSubIndex"
:title="subSubItem.text"
:disabled="subSubItem.disabled"
/>
</van-tree-select-item>
</van-tree-select-item>
</van-tree-select>
```
其中,`:items`是一个数组,包含了所有的选项。每个选项都是一个对象,包含了`text`、`disabled`和`children`三个属性。`text`表示选项的文本,`disabled`表示选项是否禁用,`children`表示选项的子选项。
`:main-active-index.sync`和`:active-id.sync`分别表示当前选中的一级选项的索引和当前选中的选项的`id`。`@click-nav`和`@click-item`分别表示点击一级选项和点击其他选项时的回调函数。
在模板中,使用`<van-tree-select>`标签来创建一个`van-tree-select`组件。在组件内部,使用`<van-tree-select-item>`标签来创建选项。使用`v-for`指令来循环渲染选项和子选项。