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