Tree Select

Select from hierarchical tree-structured data. Built on el-dm-select with the tree-data attribute.

Installation

npm install @duskmoon-dev/el-select

Usage

import '@duskmoon-dev/el-select/register';

<el-dm-select
  tree-data
  placeholder="Select department..."
  tree-options='[{"value":"eng","label":"Engineering","children":[...]}]'
></el-dm-select>

Live Demo

Default

Searchable with Clear

Multi-select Tree with Cascade

Disabled

Properties

Property	Type	Default	Description
`tree-data`	`boolean`	`false`	Enable tree-select mode
`placeholder`	`string`	`''`	Placeholder text when nothing is selected
`disabled`	`boolean`	`false`	Disable the select
`searchable`	`boolean`	`false`	Enable search filtering
`clearable`	`boolean`	`false`	Show clear button
`cascade`	`boolean`	`false`	Auto-select children when parent selected
`check-strictly`	`boolean`	`false`	Independent parent/child selection
`default-expand-all`	`boolean`	`false`	Expand all tree nodes initially
`multiple`	`boolean`	`false`	Enable multi-select in tree mode
`tree-options`	`string`	`''`	JSON string of tree options
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size variant

Tree Option Format

interface TreeSelectOption {
  value: string;
  label: string;
  disabled?: boolean;
  children?: TreeSelectOption[];
}

Events

Event	Description
`change`	Fired when selection changes
`search`	Fired when search text changes
`clear`	Fired when cleared
`expand`	Fired when tree node expanded/collapsed