TreeSelect 分类选择
文档: https://vant-contrib.gitee.io/vant/#/zh-CN/tree-select
逻辑上类似于级联选择, 样式上与 SideBar
类似. 可以用在分类筛选的模型中.
基本用法:
<van-tree-select v-model:main-active-index="activeIndex"
v-model:active-id="activeId"
:items="items">
</van-tree-select>
其中: main-active-index
为左侧的索引 (外层索引), active-id
是右侧的 id
(内层选项 id
). items
用来绑定数据. 当 active-id
为数组时, 允许右侧多选.
绑定的数据结构为:
export type TreeSelectChild = {
id: Numeric;
text: string;
disabled?: boolean;
};
export type TreeSelectItem = {
dot?: boolean;
text: string;
badge?: Numeric;
children?: TreeSelectChild[];
disabled?: boolean;
className?: unknown;
};