Skip to content

Commit 904aa0e

Browse files
yujinpanyujinpan
authored
feat(components): add tree select component (element-plus#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`
1 parent ada1287 commit 904aa0e

File tree

21 files changed

+1334
-0
lines changed

21 files changed

+1334
-0
lines changed

‎docs/.vitepress/crowdin/en-US/pages/component.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,11 @@
206206
"link": "/tree",
207207
"text": "Tree"
208208
},
209+
{
210+
"link": "/tree-select",
211+
"text": "TreeSelect",
212+
"promotion": "2.1.8"
213+
},
209214
{
210215
"link": "/tree-v2",
211216
"text": "Virtualized Tree"

‎docs/en-US/component/tree-select.md‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
---
2+
title: TreeSelect
3+
lang: en-US
4+
---
5+
6+
# TreeSelect
7+
8+
The tree selector of the dropdown menu,
9+
it combines the functions of components `el-tree` and `el-select`.
10+
11+
## Basic usage
12+
13+
Selector for tree structures.
14+
15+
:::demo
16+
17+
tree-select/basic
18+
19+
:::
20+
21+
## Select any level
22+
23+
When using the `check-strictly=true` attribute, any node can be checked,
24+
otherwise only leaf nodes are supported.
25+
26+
:::demo
27+
28+
tree-select/check-strictly
29+
30+
:::
31+
32+
## Multiple Selection
33+
34+
Multiple selection using clicks or checkbox.
35+
36+
:::demo
37+
38+
tree-select/multiple
39+
40+
:::
41+
42+
## Disabled Selection
43+
44+
Disable options using the disabled field.
45+
46+
:::demo
47+
48+
tree-select/disabled
49+
50+
:::
51+
52+
## Filterable
53+
54+
Use keyword filtering or custom filtering methods.
55+
`filterMethod` can custom filter method for data,
56+
`filterNodeMethod` can custom filter method for data node.
57+
58+
:::demo
59+
60+
tree-select/filterable
61+
62+
:::
63+
64+
## Custom content
65+
66+
Contents of custom tree nodes.
67+
68+
:::demo
69+
70+
tree-select/slots
71+
72+
:::
73+
74+
## LazyLoad
75+
76+
Lazy loading of tree nodes, suitable for large data lists.
77+
78+
:::demo
79+
80+
tree-select/lazy
81+
82+
:::
83+
84+
## Attributes
85+
86+
Since this component combines the functions of components `el-tree` and `el-select`,
87+
the original properties have not been changed, so no repetition here,
88+
and please go to the original component to view the documentation.
89+
90+
| Attributes | Methods | Events | Slots |
91+
| --------------------------------------- | ----------------------------- | ----------------------------------- | ---------------------------------- |
92+
| [tree](./tree.md#attributes) | [tree](./tree.md#method) | [tree](./tree.md#events) | [tree](./tree.md#slots) |
93+
| [select](./select.md#select-attributes) | [select](./select.md#methods) | [select](./select.md#select-events) | [select](./select.md#select-slots) |

‎docs/examples/tree-select/basic.vue‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<template>
2+
<el-tree-select v-model="value" :data="data" />
3+
</template>
4+
5+
<script lang="ts" setup>
6+
import { ref } from 'vue'
7+
8+
const value = ref()
9+
10+
const data = [
11+
{
12+
value: '1',
13+
label: 'Level one 1',
14+
children: [
15+
{
16+
value: '1-1',
17+
label: 'Level two 1-1',
18+
children: [
19+
{
20+
value: '1-1-1',
21+
label: 'Level three 1-1-1',
22+
},
23+
],
24+
},
25+
],
26+
},
27+
{
28+
value: '2',
29+
label: 'Level one 2',
30+
children: [
31+
{
32+
value: '2-1',
33+
label: 'Level two 2-1',
34+
children: [
35+
{
36+
value: '2-1-1',
37+
label: 'Level three 2-1-1',
38+
},
39+
],
40+
},
41+
{
42+
value: '2-2',
43+
label: 'Level two 2-2',
44+
children: [
45+
{
46+
value: '2-2-1',
47+
label: 'Level three 2-2-1',
48+
},
49+
],
50+
},
51+
],
52+
},
53+
{
54+
value: '3',
55+
label: 'Level one 3',
56+
children: [
57+
{
58+
value: '3-1',
59+
label: 'Level two 3-1',
60+
children: [
61+
{
62+
value: '3-1-1',
63+
label: 'Level three 3-1-1',
64+
},
65+
],
66+
},
67+
{
68+
value: '3-2',
69+
label: 'Level two 3-2',
70+
children: [
71+
{
72+
value: '3-2-1',
73+
label: 'Level three 3-2-1',
74+
},
75+
],
76+
},
77+
],
78+
},
79+
]
80+
</script>
81+
```

‎docs/examples/tree-select/check-strictly.vue‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<template>
2+
<el-tree-select v-model="value" :data="data" check-strictly />
3+
</template>
4+
5+
<script lang="ts" setup>
6+
import { ref } from 'vue'
7+
8+
const value = ref()
9+
10+
const data = [
11+
{
12+
value: '1',
13+
label: 'Level one 1',
14+
children: [
15+
{
16+
value: '1-1',
17+
label: 'Level two 1-1',
18+
children: [
19+
{
20+
value: '1-1-1',
21+
label: 'Level three 1-1-1',
22+
},
23+
],
24+
},
25+
],
26+
},
27+
{
28+
value: '2',
29+
label: 'Level one 2',
30+
children: [
31+
{
32+
value: '2-1',
33+
label: 'Level two 2-1',
34+
children: [
35+
{
36+
value: '2-1-1',
37+
label: 'Level three 2-1-1',
38+
},
39+
],
40+
},
41+
{
42+
value: '2-2',
43+
label: 'Level two 2-2',
44+
children: [
45+
{
46+
value: '2-2-1',
47+
label: 'Level three 2-2-1',
48+
},
49+
],
50+
},
51+
],
52+
},
53+
{
54+
value: '3',
55+
label: 'Level one 3',
56+
children: [
57+
{
58+
value: '3-1',
59+
label: 'Level two 3-1',
60+
children: [
61+
{
62+
value: '3-1-1',
63+
label: 'Level three 3-1-1',
64+
},
65+
],
66+
},
67+
{
68+
value: '3-2',
69+
label: 'Level two 3-2',
70+
children: [
71+
{
72+
value: '3-2-1',
73+
label: 'Level three 3-2-1',
74+
},
75+
],
76+
},
77+
],
78+
},
79+
]
80+
</script>
81+
```

‎docs/examples/tree-select/disabled.vue‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<template>
2+
<el-tree-select v-model="value" :data="data" />
3+
</template>
4+
5+
<script lang="ts" setup>
6+
import { ref } from 'vue'
7+
8+
const value = ref()
9+
10+
const data = [
11+
{
12+
value: '1',
13+
label: 'Level one 1',
14+
disabled: true,
15+
children: [
16+
{
17+
value: '1-1',
18+
label: 'Level two 1-1',
19+
disabled: true,
20+
children: [
21+
{
22+
disabled: true,
23+
value: '1-1-1',
24+
label: 'Level three 1-1-1',
25+
},
26+
],
27+
},
28+
],
29+
},
30+
{
31+
value: '2',
32+
label: 'Level one 2',
33+
children: [
34+
{
35+
value: '2-1',
36+
label: 'Level two 2-1',
37+
children: [
38+
{
39+
value: '2-1-1',
40+
label: 'Level three 2-1-1',
41+
},
42+
],
43+
},
44+
{
45+
value: '2-2',
46+
label: 'Level two 2-2',
47+
children: [
48+
{
49+
value: '2-2-1',
50+
label: 'Level three 2-2-1',
51+
},
52+
],
53+
},
54+
],
55+
},
56+
{
57+
value: '3',
58+
label: 'Level one 3',
59+
children: [
60+
{
61+
value: '3-1',
62+
label: 'Level two 3-1',
63+
children: [
64+
{
65+
value: '3-1-1',
66+
label: 'Level three 3-1-1',
67+
},
68+
],
69+
},
70+
{
71+
value: '3-2',
72+
label: 'Level two 3-2',
73+
children: [
74+
{
75+
value: '3-2-1',
76+
label: 'Level three 3-2-1',
77+
},
78+
],
79+
},
80+
],
81+
},
82+
]
83+
</script>
84+
```

0 commit comments

Comments
 (0)