• TreeSelect 分类选择
    • 引入
  • 代码演示
    • 基础用法
  • API
    • Props
    • Events
    • items 分类显示所需数据的数据结构

    TreeSelect 分类选择

    引入

    1. import { TreeSelect } from 'vant';
    3. Vue.use(TreeSelect);

    代码演示

    基础用法

    1. <van-tree-select
    2.   :items="items"
    3.   :main-active-index="mainActiveIndex"
    4.   :active-id="activeId"
    5.   @navclick="onNavClick"
    6.   @itemclick="onItemClick"
    7. />
    1. export default {
    2.   data() {
    3.     return {
    4.       items,
    5.       // 左侧高亮元素的index
    6.       mainActiveIndex: 0,
    7.       // 被选中元素的id
    8.       activeId: 1
    9.     };
    10.   },
    11.   methods: {
    12.     onNavClick(index) {
    13.       this.mainActiveIndex = index;
    14.     },
    15.     onItemClick(data) {
    16.       this.activeId = data.id;
    17.     }
    18.   }
    19. }

    API

    Props

    参数说明类型默认值版本
    items分类显示所需的数据，结构参见下方Array[]-
    height高度，单位为 pxNumber3001.3.6
    main-active-index左侧导航高亮的索引Number0-
    active-id右侧选择项，高亮的数据idString | Number0-

    Events

    事件名说明回调参数
    navclick左侧导航点击时，触发的事件index：被点击的导航的索引
    itemclick右侧选择项被点击时，会触发的事件data: 该点击项的数据

    items 分类显示所需数据的数据结构

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

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

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

    TreeSelect 分类选择 - 图1