TreeSelect 分类选择

介绍

用于从一组相关联的数据集合中进行选择。

引入

通过以下方式来全局注册组件,更多注册方式请参考组件注册

  1. import { createApp } from 'vue';
  2. import { TreeSelect } from 'vant';
  3. const app = createApp();
  4. app.use(TreeSelect);

代码演示

单选模式

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

  1. <van-tree-select
  2. v-model:active-id="activeId"
  3. v-model:main-active-index="activeIndex"
  4. :items="items"
  5. />
  1. import { ref } from 'vue';
  2. export default {
  3. setup() {
  4. const activeId = ref(1);
  5. const activeIndex = ref(0);
  6. const items = [
  7. {
  8. text: '浙江',
  9. children: [
  10. { text: '杭州', id: 1 },
  11. { text: '温州', id: 2 },
  12. ],
  13. },
  14. {
  15. text: '江苏',
  16. children: [
  17. { text: '南京', id: 5 },
  18. { text: '无锡', id: 6 },
  19. ],
  20. },
  21. ];
  22. return {
  23. items,
  24. activeId,
  25. activeIndex,
  26. };
  27. },
  28. };

多选模式

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

  1. <van-tree-select
  2. v-model:active-id="activeIds"
  3. v-model:main-active-index="activeIndex"
  4. :items="items"
  5. />
  1. import { ref } from 'vue';
  2. export default {
  3. setup() {
  4. const activeId = ref([1, 2]);
  5. const activeIndex = ref(0);
  6. const items = [
  7. {
  8. text: '浙江',
  9. children: [
  10. { text: '杭州', id: 1 },
  11. { text: '温州', id: 2 },
  12. ],
  13. },
  14. {
  15. text: '江苏',
  16. children: [
  17. { text: '南京', id: 5 },
  18. { text: '无锡', id: 6 },
  19. ],
  20. },
  21. ];
  22. return {
  23. items,
  24. activeId,
  25. activeIndex,
  26. };
  27. },
  28. };

自定义内容

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

  1. <van-tree-select
  2. v-model:main-active-index="activeIndex"
  3. height="55vw"
  4. :items="items"
  5. >
  6. <template #content>
  7. <van-image
  8. v-if="activeIndex === 0"
  9. src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
  10. />
  11. <van-image
  12. v-if="activeIndex === 1"
  13. src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
  14. />
  15. </template>
  16. </van-tree-select>
  1. import { ref } from 'vue';
  2. export default {
  3. setup() {
  4. const activeIndex = ref(0);
  5. return {
  6. activeIndex,
  7. items: [{ text: '分组 1' }, { text: '分组 2' }],
  8. };
  9. },
  10. };

徽标提示

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

  1. <van-tree-select
  2. v-model:main-active-index="activeIndex"
  3. height="55vw"
  4. :items="items"
  5. />
  1. import { ref } from 'vue';
  2. export default {
  3. setup() {
  4. const activeIndex = ref(0);
  5. return {
  6. activeIndex,
  7. items: [
  8. { text: '浙江', children: [], dot: true },
  9. { text: '江苏', children: [], badge: 5 },
  10. ],
  11. };
  12. },
  13. };

API

Props

参数说明类型默认值
items分类显示所需的数据TreeSelectItem[][]
height高度,默认单位为pxnumber | string300
main-active-index左侧选中项的索引number | string0
active-id右侧选中项的 id,支持传入数组number | string |
(number | string)[]
0
max右侧项最大选中个数number | stringInfinity
selected-icon自定义右侧栏选中状态的图标stringsuccess

Events

事件名说明回调参数
click-nav点击左侧导航时触发index: number
click-item点击右侧选择项时触发item: TreeSelectChild

Slots

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

TreeSelectItem 数据结构

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

  1. [
  2. {
  3. // 导航名称
  4. text: '所有城市',
  5. // 导航名称右上角徽标
  6. badge: 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. ];

类型定义

组件导出以下类型定义:

  1. import type { TreeSelectItem, TreeSelectChild, TreeSelectProps } from 'vant';

主题定制

样式变量

组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件

名称默认值描述
—van-tree-select-font-sizevar(—van-font-size-md)-
—van-tree-select-nav-background-colorvar(—van-background-color)-
—van-tree-select-content-background-colorvar(—van-background-color-light)-
—van-tree-select-nav-item-padding14px var(—van-padding-sm)-
—van-tree-select-item-height48px-
—van-tree-select-item-active-colorvar(—van-danger-color)-
—van-tree-select-item-disabled-colorvar(—van-gray-5)-
—van-tree-select-item-selected-size16px-

TreeSelect 分类选择 - 图1