TreeSelect 分类选择

使用指南

  1. import { TreeSelect } from 'vant';
  2. 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

传入参数

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

事件

事件名说明参数
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. ]

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