jk's notes
  • TreeSelect 分类选择

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;
};

image-20240117201036467

Last Updated:
Contributors: jk