TreeSelect 分类选择

引入

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

单选模式

为分类显示所需的数据，数据格式见下方示例。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';
  3. export default {
  4.   setup() {
  5.     const activeId = ref(1);
  6.     const activeIndex = ref(0);
  7.     const items = [
  8.       {
  9.         text: '浙江',
  10.         children: [
  11.           { text: '杭州', id: 1 },
  12.           { text: '温州', id: 2 },
  13.           { text: '宁波', id: 3, disabled: true },
  14.         ],
  15.       },
  16.       {
  17.         text: '江苏',
  18.         children: [
  19.           { text: '南京', id: 4 },
  20.           { text: '无锡', id: 5 },
  21.           { text: '徐州', id: 6 },
  22.         ],
  23.       },
  24.       { text: '福建', disabled: true },
  25.     ];
  26.     return {
  27.       items,
  28.       activeId,
  29.       activeIndex,
  30.     };
  31.   },
  32. };

多选模式

  1. import { ref } from 'vue';
  3. export default {
  4.   setup() {
  6.     const activeIndex = ref(0);
  7.     const items = [
  8.       {
  9.         text: '浙江',
  10.         children: [
  11.           { text: '杭州', id: 1 },
  12.           { text: '温州', id: 2 },
  13.           { text: '宁波', id: 3, disabled: true },
  14.         ],
  15.       },
  16.       {
  17.         text: '江苏',
  18.         children: [
  19.           { text: '南京', id: 4 },
  20.           { text: '无锡', id: 5 },
  21.           { text: '徐州', id: 6 },
  22.         ],
  23.       },
  24.       { text: '福建', disabled: true },
  25.     ];
  27.     return {
  28.       items,
  29.       activeId,
  30.       activeIndex,
  31.     };
  32.   },
  33. };

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

  1. <van-tree-select
  2.   v-model:main-active-index="activeIndex"
  3.   height="55vw"
  4.   :items="items"
  5. >
  6.     <van-image
  7.       v-if="activeIndex === 0"
  8.       src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
  9.     />
  10.     <van-image
  11.       v-if="activeIndex === 1"
  12.       src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
  13.     />
  14.   </template>
  15. </van-tree-select>

徽标提示

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

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

Props

Events

TreeSelectItem 数据结构

类型定义

组件导出以下类型定义：

    样式变量

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