Vant TreeSelect classification selection

Introduced

import Vue from 'vue';
import { TreeSelect } from 'vant';

Vue.use(TreeSelect);

Code demo

Single mode

Item displays the required data for classification, as shown in the example below. Main-active-index represents the index of the highlighted option on the left, and active-id represents the id of the highlighted option on the right

<van-tree-select
  :items="items"
  :active-id.sync="activeId"
  :main-active-index.sync="activeIndex"
/>

export default {
  data() {
    return {
      items,
      activeId: 1,
      activeIndex: 0
    };
  }
}

Multi-select mode

When active-id is array format, you can select several right-hand options

<van-tree-select
  :items="items"
  :active-id.sync="activeIds"
  :main-active-index.sync="activeIndex"
/>

export default {
  data() {
    return {
      items,
      activeIds: [1, 2],
      activeIndex: 0
    };
  }
}

Custom content

The contents of the right-hand area can be customized with the content slot

<van-tree-select
  height="55vw"
  :items="items"
  :main-active-index.sync="active"
>
  <template slot="content">
    <van-image v-if="active === 0" src="https://img.yzcdn.cn/vant/apple-1.jpg" rel="external nofollow"  />
    <van-image v-if="active === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" rel="external nofollow"  />
  </template>
</van-tree-select>

export default {
  data() {
    return {
      active: 0,
      items: [{ text: '分组 1' }, { text: '分组 2' }]
    }
  }
}

Tips

When you set the dot property, a small red dot appears in the upper right corner of the icon. When you set the info property, the logo appears in the upper right corner of the icon

<van-tree-select
  height="55vw"
  :items="items"
  :main-active-index.sync="activeIndex"
/>

export default {
  data() {
    return {
      activeIndex: 0,
      items: [
        { text: '浙江', children: [], dot: true },
        { text: '江苏', children: [], info: 5 }
      ]
    }
  }
}

Api

Props

Events

Slots

Item data structure

Items are an array of objects that describe the classification, each with text representing the name of the current classification and children representing the options in the classification.

[
  {
    // 导航名称
    text: '所有城市',
    // 导航名称右上角徽标
    info: 3,
    // 是否在导航名称右上角显示小红点
    dot: true,
    // 导航节点额外类名
    className: 'my-class',
    // 该导航下所有的可选项
    children: [
      {
        // 名称
        text: '温州',
        // id，作为匹配选中状态的标识符
        id: 1,
        // 禁用选项
        disabled: true
      },
      {
        text: '杭州',
        id: 2
      }
    ]
  }
]