TreeSelect

TxTreeSelect wraps TxTree in a Popover-backed combobox. It supports single-value selection, multiple checked keys, searchable tree filtering, clear actions, custom node rendering, and imperative open/focus helpers.

Basic Usage

TreeSelect

Demo will load when visible.

<script setup lang="ts">
import { computed, ref } from 'vue'

const multiple = ref(false)
const value = ref<string | number | Array<string | number> | undefined>(undefined)

const nodes = [
  {
    key: 'general',
    label: 'General',
    children: [
      { key: 'appearance', label: 'Appearance' },
      { key: 'language', label: 'Language' },
    ],
  },
  {
    key: 'account',
    label: 'Account',
    children: [
      { key: 'profile', label: 'Profile' },
      { key: 'billing', label: 'Billing' },
    ],
  },
  {
    key: 'danger',
    label: 'Danger Zone',
    disabled: true,
    children: [
      { key: 'delete', label: 'Delete account', disabled: true },
    ],
  },
]

const placeholder = computed(() => (multiple.value ? 'Select multiple' : 'Select one'))
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; width: 420px;">
    <div style="display: flex; gap: 8px; align-items: center;">
      <TxButton size="small" variant="secondary" @click="multiple = !multiple">
        Toggle multiple
      </TxButton>
      <TxButton size="small" variant="secondary" @click="value = multiple ? [] : undefined">
        Clear
      </TxButton>
    </div>

    <TxTreeSelect
      v-model="value"
      :nodes="nodes"
      :multiple="multiple"
      :placeholder="placeholder"
      :dropdown-max-height="260"
    />

    <div style="color: var(--tx-text-color-secondary); font-size: 12px;">
      value: {{ value }}
    </div>
  </div>
</template>

Notes

When multiple is true, modelValue must be an array; clearing returns an empty array.
When multiple is false, clearing returns undefined.

API

TxTreeSelect Props

Prop	Type	Default	Description
`modelValue`	`string \| number \| Array<string \| number> \| undefined`	-	Selected key in single mode, or selected key array in `multiple` mode.
`nodes`	`TreeSelectNode[]`	`[]`	Tree nodes displayed in the dropdown.
`multiple`	`boolean`	`false`	Enables checkbox-style multi-select and tag display in the trigger.
`disabled`	`boolean`	`false`	Disables the combobox trigger, tree interaction, and clear action.
`placeholder`	`string`	`'请选择'`	Placeholder shown when nothing is selected.
`searchable`	`boolean`	`true`	Shows a search input and passes its text to `TxTree` filtering.
`clearable`	`boolean`	`true`	Shows a clear button when there is a selected key.
`placement`	`PopoverPlacement`	`'bottom-start'`	Popover placement for the dropdown panel.
`dropdownOffset`	`number`	`6`	Popover offset from the trigger.
`dropdownWidth`	`number`	`0`	Explicit Popover panel width; `0` leaves width resolution to the Popover.
`dropdownMaxWidth`	`number`	`480`	Maximum Popover panel width.
`dropdownMaxHeight`	`number`	`320`	Maximum tree panel height in pixels.
`defaultExpandedKeys`	`Array<string \| number>`	`[]`	Tree node keys expanded on initial render.

TreeSelectNode

Field	Type	Description
`key`	`string \| number`	Stable node key used as the selected value.
`label`	`string`	Visible node label and trigger display text.
`disabled`	`boolean`	Disables selecting this node.
`children`	`TreeSelectNode[]`	Optional nested child nodes.

Events

Event	Params	Description
`update:modelValue`	`(v: TreeSelectValue)`	v-model update emitted after tree selection or clear.
`change`	`(v: TreeSelectValue)`	Emitted with the same value after selection or clear.
`open`	-	Emitted when the Popover dropdown opens.
`close`	-	Emitted when the Popover dropdown closes.

Slots

Name	Description
`node`	Custom node label content. Receives `{ node, level, expanded, selected }`.

Expose

Name	Type	Description
`open()`	`() => void`	Opens the dropdown.
`close()`	`() => void`	Closes the dropdown.
`toggle()`	`() => void`	Toggles the dropdown open state.
`focus()`	`() => void`	Focuses the combobox trigger.
`blur()`	`() => void`	Blurs the combobox trigger.
`clear()`	`() => void`	Clears to `undefined` in single mode or `[]` in multiple mode.
`setValue(v)`	`(v: TreeSelectValue) => void`	Emits the supplied value through `update:modelValue` and `change`.
`getValue()`	`() => TreeSelectValue`	Returns the current `modelValue`.
`getCheckedKeys()`	`() => Array<string \| number>`	Returns the currently selected keys as an array.