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.         ],
  14.       },
  15.       {
  16.         text: '江苏',
  17.         children: [
  18.           { text: '南京', id: 5 },
  19.         ],
  20.       },
  21.     ];
  23.     return {
  24.       items,
  25.       activeId,
  26.       activeIndex,
  27.     };
  28.   },
  29. };

多选模式

  3. export default {
  4.   setup() {
  5.     const activeId = ref([1, 2]);
  6.     const activeIndex = ref(0);
  7.     const items = [
  8.       {
  9.         text: '浙江',
  10.         children: [
  11.           { text: '杭州', id: 1 },
  12.           { text: '温州', id: 2 },
  13.         ],
  14.       },
  15.       {
  16.         text: '江苏',
  17.         children: [
  18.           { text: '南京', id: 5 },
  19.           { text: '无锡', id: 6 },
  20.         ],
  21.       },
  22.     ];
  24.     return {
  25.       items,
  26.       activeId,
  27.       activeIndex,
  28.   },
  29. };

通过 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"
  10.     />
  11.     <van-image
  12.       v-if="activeIndex === 1"
  13.       src="https://img.yzcdn.cn/vant/apple-2.jpg"
  14.     />
  15.   </template>
  16. </van-tree-select>

徽标提示

设置 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';
  3. export default {
  4.   setup() {
  5.     const activeIndex = ref(0);
  6.     return {
  7.       activeIndex,
  8.       items: [
  9.         { text: '浙江', children: [], dot: true },
  10.         { text: '江苏', children: [], badge: 5 },
  11.       ],
  12.     };
  13.   },
  14. };

Props

Events

TreeSelectItem 数据结构

类型定义

组件导出以下类型定义：

样式变量

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