element-plus/docs/en-US/component/tree-select.md
虞金攀 904aa0e21b
feat(components): add tree select component (#6843)
* feat(ElTreeSelect): add tree select base component

* refactor(ElTreeSelect): use render function and move select/tree props to them self module

* fix(ElTreeSelect): init value not checked

* fix(ElTreeSelect): `toArray` ignores valid values

* fix(ElTreeSelect): expose not working when defined on mounted

* fix(ElTreeSelect): watch `modelValue` deep

* test(ElTreeSelect): add base unit test

* perf(ElTreeSelect): default slot should be a function

* fix(ElTreeSelect): `onNodeClick` can not call,

* test(ElTreeSelect): update unit test

* fix(ElTreeSelect): `onNodeClick` can not call,

* fix(ElTreeSelect): remove folder node when `checkStrictly` is false

* feat(ElTreeSelect): export `ElTreeSelect`

* fix(ElTreeSelect): `filterMethod` conflicts with `filterNodeMethod`

* docs(ElTreeSelect): add component docs

* fix(ElTreeSelect): fix lint

* docs(ElTreeSelect): fix lazy loading requires non-leaf nodes, and change mock labels

* docs(ElTreeSelect): the link address of the attributes is incorrect

* docs(ElTreeSelect): `dropdown` doesn't need the `-` symbol

* refactor(ElTreeSelect): use alias path and make sure vue is above to components

* refactor(ElTreeSelect): use a unified namespace for styles

* docs(ElTreeSelect): change option labels in default slots

* refactor(ElTreeSelect): import `ElOption` using unified entry and change the way to override the select click event

* style(ElTreeSelect): sort imports

* docs(ElTreeSelect): update the documentation for special codes

* refactor(ElTreeSelect): keep it consistent with the select style

* refactor(ElTreeSelect): use `isFunction` from `@element-plus/utils`

* refactor(ElTreeSelect): use single closing tag when no subset

* docs(ElTreeSelect): set `TreeSelect` promotion as `2.1.8`
2022-04-02 15:15:33 +08:00

1.8 KiB

title lang
TreeSelect en-US

TreeSelect

The tree selector of the dropdown menu, it combines the functions of components el-tree and el-select.

Basic usage

Selector for tree structures.

:::demo

tree-select/basic

:::

Select any level

When using the check-strictly=true attribute, any node can be checked, otherwise only leaf nodes are supported.

:::demo

tree-select/check-strictly

:::

Multiple Selection

Multiple selection using clicks or checkbox.

:::demo

tree-select/multiple

:::

Disabled Selection

Disable options using the disabled field.

:::demo

tree-select/disabled

:::

Filterable

Use keyword filtering or custom filtering methods. filterMethod can custom filter method for data, filterNodeMethod can custom filter method for data node.

:::demo

tree-select/filterable

:::

Custom content

Contents of custom tree nodes.

:::demo

tree-select/slots

:::

LazyLoad

Lazy loading of tree nodes, suitable for large data lists.

:::demo

tree-select/lazy

:::

Attributes

Since this component combines the functions of components el-tree and el-select, the original properties have not been changed, so no repetition here, and please go to the original component to view the documentation.

Attributes Methods Events Slots
tree tree tree tree
select select select select