/*! For license information please see 8300.53f70ac3.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["8300"],{33117:function(s,n,a){"use strict";a.r(n);var t=a("80681");let e=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

TreeSelect

\n

Intro

\n

Used to select from a set of related data sets.

\n

Install

\n

Register component globally via app.use, refer to Component Registration for more registration ways.

\n
import { createApp } from 'vue';\nimport { TreeSelect } from 'vant';\n\nconst app = createApp();\napp.use(TreeSelect);\n
\n

Usage

\n

Radio Mode

\n
<van-tree-select\n  v-model:active-id="activeId"\n  v-model:main-active-index="activeIndex"\n  :items="items"\n/>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const activeId = ref(1);\n    const activeIndex = ref(0);\n    const items = [\n      {\n        text: 'Group 1',\n        children: [\n          { text: 'Delaware', id: 1 },\n          { text: 'Florida', id: 2 },\n          { text: 'Georgia', id: 3, disabled: true },\n        ],\n      },\n      {\n        text: 'Group 2',\n        children: [\n          { text: 'Alabama', id: 4 },\n          { text: 'Kansas', id: 5 },\n          { text: 'Louisiana', id: 6 },\n        ],\n      },\n      { text: 'Group 3', disabled: true },\n    ];\n\n    return {\n      items,\n      activeId,\n      activeIndex,\n    };\n  },\n};\n
\n

Multiple Mode

\n
<van-tree-select\n  v-model:active-id="activeIds"\n  v-model:main-active-index="activeIndex"\n  :items="items"\n/>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const activeIds = ref([1, 2]);\n    const activeIndex = ref(0);\n    const items = [\n      {\n        text: 'Group 1',\n        children: [\n          { text: 'Delaware', id: 1 },\n          { text: 'Florida', id: 2 },\n          { text: 'Georgia', id: 3, disabled: true },\n        ],\n      },\n      {\n        text: 'Group 2',\n        children: [\n          { text: 'Alabama', id: 4 },\n          { text: 'Kansas', id: 5 },\n          { text: 'Louisiana', id: 6 },\n        ],\n      },\n      { text: 'Group 3', disabled: true },\n    ];\n\n    return {\n      items,\n      activeIds,\n      activeIndex,\n    };\n  },\n};\n
\n

Custom Content

\n
<van-tree-select\n  v-model:main-active-index="activeIndex"\n  height="55vw"\n  :items="items"\n>\n  <template #content>\n    <van-image\n      v-if="activeIndex === 0"\n      src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"\n    />\n    <van-image\n      v-if="activeIndex === 1"\n      src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"\n    />\n  </template>\n</van-tree-select>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const activeIndex = ref(0);\n    return {\n      activeIndex,\n      items: [{ text: 'Group 1' }, { text: 'Group 2' }],\n    };\n  },\n};\n
\n

Show Badge

\n
<van-tree-select\n  v-model:main-active-index="activeIndex"\n  height="55vw"\n  :items="items"\n/>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const activeIndex = ref(0);\n    return {\n      activeIndex,\n      items: [\n        {\n          text: 'Group 1',\n          children: [\n            { text: 'Delaware', id: 1 },\n            { text: 'Florida', id: 2 },\n            { text: 'Georgia', id: 3, disabled: true },\n          ],\n          dot: true,\n        },\n        {\n          text: 'Group 2',\n          children: [\n            { text: 'Alabama', id: 4 },\n            { text: 'Kansas', id: 5 },\n            { text: 'Louisiana', id: 6 },\n          ],\n          badge: 5,\n        },\n      ],\n    };\n  },\n};\n
\n

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
v-model:main-active-indexThe index of selected parent nodenumber | string0
v-model:active-idId of selected itemnumber | string |
(number | string)[]		0
itemsRequired datasets for the componentTreeSelectItem[][]
heightHeightnumber | string300
maxMaximum number of selected itemsnumber | stringInfinity
selected-iconSelected iconstringsuccess
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionArguments
click-navEmitted when parent node is selectedindex: number
click-itemEmitted when item is selecteditem: TreeSelectChild
\n

Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescriptionSlotProps
nav-text v4.1.0Custom name of the parent nodeitem: TreeSelectChild
contentCustom right content-
\n

Data Structure of TreeSelectItem

\n

TreeSelectItem should be an array contains specified tree objects.

\n

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

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

Types

\n

The component exports the following type definitions:

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

Theming

\n

CSS Variables

\n

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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDefault ValueDescription
--van-tree-select-font-sizevar(--van-font-size-md)-
--van-tree-select-nav-backgroundvar(--van-background)-
--van-tree-select-content-backgroundvar(--van-background-2)-
--van-tree-select-nav-item-padding14px var(--van-padding-sm)-
--van-tree-select-item-height48px-
--van-tree-select-item-active-colorvar(--van-primary-color)-
--van-tree-select-item-disabled-colorvar(--van-gray-5)-
--van-tree-select-item-selected-size16px-
\n
'},null,8,e))}}}]);