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. exportdefault{
  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