TreeSelect 分类选择

引入

  1. import Vue from 'vue';
  2. import { TreeSelect } from 'vant';
  3. Vue.use(TreeSelect);

代码演示

单选模式

item为分类显示所需的数据,数据格式见下方示例。main-active-index表示左侧高亮选项的索引,active-id表示右侧高亮选项的 id

  1. <van-tree-select
  2. :items="items"
  3. :active-id.sync="activeId"
  4. :main-active-index.sync="activeIndex"
  5. />
  1. export default {
  2. data() {
  3. return {
  4. items,
  5. activeId: 1,
  6. activeIndex: 0
  7. };
  8. }
  9. }

多选模式

active-id为数组格式时,可以选中多个右侧选项

  1. <van-tree-select
  2. :items="items"
  3. :active-id.sync="activeIds"
  4. :main-active-index.sync="activeIndex"
  5. />
  1. export default {
  2. data() {
  3. return {
  4. items,
  5. activeIds: [1, 2],
  6. activeIndex: 0
  7. };
  8. }
  9. }

自定义内容

通过content插槽可以自定义右侧区域的内容

  1. <van-tree-select
  2. height="55vw"
  3. :items="items"
  4. :main-active-index.sync="activeIndex"
  5. >
  6. <template slot="content">
  7. <van-image v-if="activeIndex === 0" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
  8. <van-image v-if="activeIndex === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
  9. </template>
  10. </van-tree-select>
  1. export default {
  2. data() {
  3. return {
  4. activeIndex: 0,
  5. items: [{ text: '分组 1' }, { text: '分组 2' }]
  6. }
  7. }
  8. }

提示信息

设置dot属性后,会在图标右上角展示一个小红点。设置info属性后,会在图标右上角展示相应的徽标

  1. <van-tree-select
  2. height="55vw"
  3. :items="items"
  4. :main-active-index.sync="activeIndex"
  5. />
  1. export default {
  2. data() {
  3. return {
  4. activeIndex: 0,
  5. items: [
  6. { text: '浙江', children: [], dot: true },
  7. { text: '江苏', children: [], info: 5 }
  8. ]
  9. }
  10. }
  11. }

API

Props

参数说明类型默认值
items分类显示所需的数据Item[][]
height高度,默认单位为pxstring | number300
main-active-index左侧选中项的索引number0
active-id右侧选中项的 id,支持传入数组string | number | (string | number)[]0
max v2.2.0右侧项最大选中个数numberInfinity

Events

事件名说明回调参数
click-nav点击左侧导航时触发index:被点击的导航的索引
click-item点击右侧选择项时触发data: 该点击项的数据

Slots

名称说明
content自定义右侧区域内容

Item 数据结构

items 整体为一个数组,数组内包含一系列描述分类的对象,每个分类里,text表示当前分类的名称,children表示分类里的可选项。

  1. [
  2. {
  3. // 导航名称
  4. text: '所有城市',
  5. // 导航名称右上角徽标
  6. info: 3,
  7. // 是否在导航名称右上角显示小红点
  8. dot: true,
  9. // 导航节点额外类名
  10. className: 'my-class',
  11. // 该导航下所有的可选项
  12. children: [
  13. {
  14. // 名称
  15. text: '温州',
  16. // id,作为匹配选中状态的标识符
  17. id: 1,
  18. // 禁用选项
  19. disabled: true
  20. },
  21. {
  22. text: '杭州',
  23. id: 2
  24. }
  25. ]
  26. }
  27. ]

TreeSelect 分类选择 - 图1