TreeSelect 分类选择

介绍

用于从一组相关联的数据集合中进行选择。

引入

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

  1. "usingComponents": {
  2. "van-tree-select": "@vant/weapp/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. height="55vw"
  4. main-active-index="{{ mainActiveIndex }}"
  5. active-id="{{ activeId }}"
  6. bind:click-nav="onClickNav"
  7. bind:click-item="onClickItem"
  8. >
  9. <image src="https://img.yzcdn.cn/vant/apple-1.jpg" slot="content" />
  10. </van-tree-select>

API

Props

参数说明类型默认值版本
items分类显示所需的数据Array[]-
height高度,默认单位为pxnumber | string300
main-active-index左侧选中项的索引number0-
active-id右侧选中项的 id,支持传入数组string | number | Array0-
max右侧项最大选中个数numberInfinity-
selected-icon v1.5.0自定义右侧栏选中状态的图标stringsuccess

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. // 导航名称右上角徽标,1.5.0 版本开始支持
  6. badge: 3,
  7. // 是否在导航名称右上角显示小红点,1.5.0 版本开始支持
  8. dot: true,
  9. // 禁用选项
  10. disabled: false,
  11. // 该导航下所有的可选项
  12. children: [
  13. {
  14. // 名称
  15. text: '温州',
  16. // id,作为匹配选中状态的标识
  17. id: 1,
  18. // 禁用选项
  19. disabled: true,
  20. },
  21. {
  22. text: '杭州',
  23. id: 2,
  24. },
  25. ],
  26. },
  27. ];

外部样式类

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

TreeSelect 分类选择 - 图1