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: items,
  5.       // 左侧高亮元素的index
  6.       mainActiveIndex: 0,
  7.       // 被选中元素的id
  8.       activeId: 1001
  9.     };
  10.   },
  11.   methods: {
  12.     onNavClick(index) {
  13.       this.mainActiveIndex = index;
  14.     },
  15.     onItemClick(data) {
  16.       this.activeId = data.id;
  17.     }
  18.   }
  19. }

API

传入参数

参数 说明 类型 默认值
items 分类显示所需的数据，具体数据结构可看 数据结构 Array []
main-active-index 左侧导航高亮的索引 Number 0
active-id 右侧选择项，高亮的数据id String Number 0

事件

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

数据格式

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

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

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

  1. [
  2.   {
  3.     // 导航名称
  4.     text: '所有城市',
  5.     // 该导航下所有的可选项
  6.     children: [
  7.       {
  8.         // 可选项的名称
  9.         text: '温州',
  10.         // 可选项的id，高亮的时候是根据id是否和选中的id是否相同进行判断的
  11.         id: 1002
  12.       },
  13.       {
  14.         // 可选项的名称
  15.         text: '杭州',
  16.         // 可选项的id，高亮的时候是根据id是否和选中的id是否相同进行判断的
  17.         id: 1001
  18.       }
  19.     ]
  20.   }
  21. ]

原文:

https://youzan.github.io/vant/#/zh-CN/tree-select