TreeSelect

Intro

Used to select from a set of related data sets.

Install

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

const app = createApp();
app.use(TreeSelect);

Usage

Radio Mode

html

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

import { ref } from 'vue';

export default {
  setup() {
    const activeId = ref(1);
    const activeIndex = ref(0);
    const items = [
      {
        text: 'Group 1',
        children: [
          { text: 'Delaware', id: 1 },
          { text: 'Florida', id: 2 },
          { text: 'Georgia', id: 3, disabled: true },
        ],
      },
      {
        text: 'Group 2',
        children: [
          { text: 'Alabama', id: 4 },
          { text: 'Kansas', id: 5 },
          { text: 'Louisiana', id: 6 },
        ],
      },
      { text: 'Group 3', disabled: true },
    ];

    return {
      items,
      activeId,
      activeIndex,
    };
  },
};

Multiple Mode

html

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

import { ref } from 'vue';

export default {
  setup() {
    const activeIds = ref([1, 2]);
    const activeIndex = ref(0);
    const items = [
      {
        text: 'Group 1',
        children: [
          { text: 'Delaware', id: 1 },
          { text: 'Florida', id: 2 },
          { text: 'Georgia', id: 3, disabled: true },
        ],
      },
      {
        text: 'Group 2',
        children: [
          { text: 'Alabama', id: 4 },
          { text: 'Kansas', id: 5 },
          { text: 'Louisiana', id: 6 },
        ],
      },
      { text: 'Group 3', disabled: true },
    ];

    return {
      items,
      activeIds,
      activeIndex,
    };
  },
};

Custom Content

html

<van-tree-select
  v-model:main-active-index="activeIndex"
  height="55vw"
  :items="items"
>
  <template #content>
    <van-image
      v-if="activeIndex === 0"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
    />
    <van-image
      v-if="activeIndex === 1"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
    />
  </template>
</van-tree-select>

import { ref } from 'vue';

export default {
  setup() {
    const activeIndex = ref(0);
    return {
      activeIndex,
      items: [{ text: 'Group 1' }, { text: 'Group 2' }],
    };
  },
};

Show Badge

html

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

import { ref } from 'vue';

export default {
  setup() {
    const activeIndex = ref(0);
    return {
      activeIndex,
      items: [
        {
          text: 'Group 1',
          children: [
            { text: 'Delaware', id: 1 },
            { text: 'Florida', id: 2 },
            { text: 'Georgia', id: 3, disabled: true },
          ],
          dot: true,
        },
        {
          text: 'Group 2',
          children: [
            { text: 'Alabama', id: 4 },
            { text: 'Kansas', id: 5 },
            { text: 'Louisiana', id: 6 },
          ],
          badge: 5,
        },
      ],
    };
  },
};

API

Props

Attribute	Description	Type	Default
v-model:main-active-index	The index of selected parent node	number \| string	`0`
v-model:active-id	Id of selected item	_number \| string \|
(number \| string)[]_	`0`
items	Required datasets for the component	TreeSelectItem[]	`[]`
height	Height	number \| string	`300`
max	Maximum number of selected items	number \| string	`Infinity`
selected-icon	Selected icon	string	`success`

Events

Event	Description	Arguments
click-nav	Emitted when parent node is selected	index: number
click-item	Emitted when item is selected	item: TreeSelectChild

Slots

Name	Description	SlotProps
nav-text `v4.1.0`	Custom name of the parent node	item: TreeSelectChild
content	Custom right content	-

Data Structure of TreeSelectItem

TreeSelectItem should be an array contains specified tree objects.

In every tree object, text property defines id stands for the unique key while the children contains sub-tree objects.

[
  {
    // name of the parent node
    text: 'Group 1',
    // badge
    badge: 3,
    // Whether to show red dot
    dot: true,
    // ClassName of parent node
    className: 'my-class',
    // leaves of this parent node
    children: [
      {
        // name of the leaf node
        text: 'Washington',
        // id of the leaf node, component highlights leaf node by comparing the activeId with this.
        id: 1,
        // disable options
        disabled: true,
      },
      {
        text: 'Baltimore',
        id: 2,
      },
    ],
  },
];

Types

The component exports the following type definitions:

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

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-tree-select-font-size	var(--van-font-size-md)	-
--van-tree-select-nav-background	var(--van-background)	-
--van-tree-select-content-background	var(--van-background-2)	-
--van-tree-select-nav-item-padding	14px var(--van-padding-sm)	-
--van-tree-select-item-height	48px	-
--van-tree-select-item-active-color	var(--van-primary-color)	-
--van-tree-select-item-disabled-color	var(--van-gray-5)	-
--van-tree-select-item-selected-size	16px	-