TreeSelect 分类选择

引入

app.jsonindex.json中引入组件,详细介绍见快速上手

  1. "usingComponents": {
  2. "van-tree-select": "path/to/@vant/weapp/dist/tree-select/index"
  3. }

代码演示

单选模式

可以在任意位置上使用 van-tree-select 标签。传入对应的数据即可。此组件支持单选或多选,具体行为完全基于事件 click-item 的实现逻辑如何为属性 active-id 赋值,当 active-id 为数组时即为多选状态。

  1. <van-tree-select
  2. items="{{ items }}"
  3. main-active-index="{{ mainActiveIndex }}"
  4. active-id="{{ activeId }}"
  5. bind:click-nav="onClickNav"
  6. bind:click-item="onClickItem"
  7. />
  1. Page({
  2. data: {
  3. mainActiveIndex: 0,
  4. activeId: null
  5. },
  6. onClickNav({ detail = {} }) {
  7. this.setData({
  8. mainActiveIndex: detail.index || 0
  9. });
  10. },
  11. onClickItem({ detail = {} }) {
  12. const activeId = this.data.activeId === detail.id ? null : detail.id;
  13. this.setData({ activeId });
  14. }
  15. });

多选模式

  1. <van-tree-select
  2. items="{{ items }}"
  3. main-active-index="{{ mainActiveIndex }}"
  4. active-id="{{ activeId }}"
  5. max="{{ max }}"
  6. bind:click-nav="onClickNav"
  7. bind:click-item="onClickItem"
  8. />
  1. Page({
  2. data: {
  3. mainActiveIndex: 0,
  4. activeId: [],
  5. max: 2
  6. },
  7. onClickNav({ detail = {} }) {
  8. this.setData({
  9. mainActiveIndex: detail.index || 0
  10. });
  11. },
  12. onClickItem({ detail = {} }) {
  13. const { activeId } = this.data;
  14. const index = activeId.indexOf(detail.id);
  15. if (index > -1) {
  16. activeId.splice(index, 1);
  17. } else {
  18. activeId.push(detail.id);
  19. }
  20. this.setData({ activeId });
  21. }
  22. });

自定义内容

  1. <van-tree-select
  2. items="{{ items }}"
  3. main-active-index="{{ mainActiveIndex }}"
  4. active-id="{{ activeId }}"
  5. bind:click-nav="onClickNav"
  6. bind:click-item="onClickItem"
  7. >
  8. <image src="https://img.yzcdn.cn/vant/apple-1.jpg" slot="content" />
  9. <van-tree-select/>

API

Props

参数说明类型默认值版本
items分类显示所需的数据Array[]-
main-active-index左侧选中项的索引number0-
active-id右侧选中项的 id,支持传入数组string | number | Array0-
max右侧项最大选中个数numberInfinity-

Events

事件名说明回调参数
bind:click-nav左侧导航点击时,触发的事件event.detail.index:被点击的导航的索引
bind:click-item右侧选择项被点击时,会触发的事件event.detail: 该点击项的数据

Slots

名称说明
content自定义右侧区域内容,如果存在 items,则插入在顶部

items 数据结构

items 整体为一个数组,数组内包含一系列描述分类的对象

每个分类里,text 表示当前分类的名称。children 表示分类里的可选项,为数组结构,id 被用来唯一标识每个选项

  1. [
  2. {
  3. // 导航名称
  4. text: '所有城市',
  5. // 禁用选项
  6. disabled: false,
  7. // 该导航下所有的可选项
  8. children: [
  9. {
  10. // 名称
  11. text: '温州',
  12. // id,作为匹配选中状态的标识
  13. id: 1,
  14. // 禁用选项
  15. disabled: true
  16. },
  17. {
  18. text: '杭州',
  19. id: 2
  20. }
  21. ]
  22. }
  23. ]

外部样式类

类名说明
main-item-class左侧选项样式类
content-item-class右侧选项样式类
main-active-class左侧选项选中样式类
content-active-class右侧选项选中样式类
main-disabled-class左侧选项禁用样式类
content-disabled-class右侧选项禁用样式类

TreeSelect 分类选择 - 图1