mirror of https://github.com/ElemeFE/element
23 KiB
23 KiB
TreeSelect
The tree selector of the dropdown menu, it combines the functions of components el-tree and el-select.
Basic usage
:::demo
<template>
<el-row :gutter="12">
<el-col :span="12">
<p>click text to select</p>
<el-tree-select
placeholder="Select"
v-model="value1"
:data="data"
@change="handleNodeChange"
/>
</el-col>
<el-col :span="12">
<p>show-checkbox</p>
<el-tree-select
placeholder="Select"
v-model="value2"
:data="data"
show-checkbox
@change="handleNodeChange"
/>
</el-col>
</el-row>
</template>
<script>
export default {
data() {
return {
value1: "",
value2: "",
data: [
{
value: "1",
label: "Level One 1",
children: [
{
value: "1-1",
label: "Level Two 1-1",
children: [
{
value: "1-1-1",
label: "Level Three 1-1-1",
},
],
},
],
},
{
value: "2",
label: "Level One 2",
children: [
{
value: "2-1",
label: "Level Two 2-1",
children: [
{
value: "2-1-1",
label: "Level Three 2-1-1",
},
],
},
{
value: "2-2",
label: "Level Two 2-2",
children: [
{
value: "2-2-1",
label: "Level Three 2-2-1",
},
],
},
],
},
{
value: "3",
label: "Level One 3",
children: [
{
value: "3-1",
label: "Level Two 3-1",
children: [
{
value: "3-1-1",
label: "Level Three 3-1-1",
},
],
},
{
value: "3-2",
label: "Level Two 3-2",
children: [
{
value: "3-2-1",
label: "Level Three 3-2-1",
},
],
},
],
},
]
}
},
methods: {
handleNodeChange(e) {
console.log(e);
}
}
}
</script>
:::
Select any level
When using the check-strictly=true attribute, any node can be checked, otherwise only leaf nodes are supported.
:::demo
<el-row :gutter="12">
<el-col :span="12">
<p>click text to select</p>
<el-tree-select
placeholder="Select"
v-model="value1"
:data="data"
check-strictly
@change="handleNodeChange"
/>
</el-col>
<el-col :span="12">
<p>show-checkbox, only click checkbox to select</p>
<el-tree-select
placeholder="Select"
v-model="value2"
:data="data"
show-checkbox
check-strictly
@change="handleNodeChange"
/>
</el-col>
</el-row>
<script>
export default {
data() {
return {
value1: "",
value2: "",
data: [
{
value: "1",
label: "Level One 1",
children: [
{
value: "1-1",
label: "Level Two 1-1",
children: [
{
value: "1-1-1",
label: "Level Three 1-1-1",
},
],
},
],
},
{
value: "2",
label: "Level One 2",
children: [
{
value: "2-1",
label: "Level Two 2-1",
children: [
{
value: "2-1-1",
label: "Level Three 2-1-1",
},
],
},
{
value: "2-2",
label: "Level Two 2-2",
children: [
{
value: "2-2-1",
label: "Level Three 2-2-1",
},
],
},
],
},
{
value: "3",
label: "Level One 3",
children: [
{
value: "3-1",
label: "Level Two 3-1",
children: [
{
value: "3-1-1",
label: "Level Three 3-1-1",
},
],
},
{
value: "3-2",
label: "Level Two 3-2",
children: [
{
value: "3-2-1",
label: "Level Three 3-2-1",
},
],
},
],
},
]
}
},
methods: {
handleNodeChange(e) {
console.log(e);
}
}
}
</script>
:::
Multiple Selection
Multiple selection using clicks or checkbox. :::demo
<el-row :gutter="12">
<el-col :span="8">
<p>click text to select</p>
<el-tree-select
placeholder="Select"
v-model="value1"
:data="data"
multiple
@change="handleNodeChange"
/>
</el-col>
<el-col :span="8">
<p>show checkbox</p>
<el-tree-select
placeholder="Select"
v-model="value2"
:data="data"
multiple
show-checkbox
@change="handleNodeChange"
/>
</el-col>
<el-col :span="8">
<p>show checkbox with `check-strictly`</p>
<el-tree-select
placeholder="Select"
v-model="value3"
:data="data"
multiple
show-checkbox
check-strictly
@change="handleNodeChange"
/>
</el-col>
</el-row>
<script>
export default {
data() {
return {
value1: [],
value2: [],
value3: [],
data: [
{
value: "1",
label: "Level One 1",
children: [
{
value: "1-1",
label: "Level Two 1-1",
children: [
{
value: "1-1-1",
label: "Level Three 1-1-1",
},
],
},
],
},
{
value: "2",
label: "Level One 2",
children: [
{
value: "2-1",
label: "Level Two 2-1",
children: [
{
value: "2-1-1",
label: "Level Three 2-1-1",
},
],
},
{
value: "2-2",
label: "Level Two 2-2",
children: [
{
value: "2-2-1",
label: "Level Three 2-2-1",
},
],
},
],
},
{
value: "3",
label: "Level One 3",
children: [
{
value: "3-1",
label: "Level Two 3-1",
children: [
{
value: "3-1-1",
label: "Level Three 3-1-1",
},
],
},
{
value: "3-2",
label: "Level Two 3-2",
children: [
{
value: "3-2-1",
label: "Level Three 3-2-1",
},
],
},
],
},
]
}
},
methods: {
handleNodeChange(e) {
console.log(e);
}
}
}
</script>
:::
Clearable
You can clear tree-select using a clear icon.
Set clearable attribute for el-tree-select and a clear icon will appear.
:::demo
<el-row :gutter="12">
<el-col :span="12">
<el-tree-select
placeholder="Select"
v-model="value1"
:data="data"
clearable
/>
</el-col>
<el-col :span="12">
<el-tree-select
placeholder="Select"
v-model="value2"
:data="data"
multiple
show-checkbox
clearable
/>
</el-col>
</el-row>
<script>
export default {
data() {
return {
value1: "",
value2: "",
data: [
{
value: "1",
label: "Level One 1",
children: [
{
value: "1-1",
label: "Level Two 1-1",
children: [
{
value: "1-1-1",
label: "Level Three 1-1-1",
},
],
},
],
},
{
value: "2",
label: "Level One 2",
children: [
{
value: "2-1",
label: "Level Two 2-1",
children: [
{
value: "2-1-1",
label: "Level Three 2-1-1",
},
],
},
{
value: "2-2",
label: "Level Two 2-2",
children: [
{
value: "2-2-1",
label: "Level Three 2-2-1",
},
],
},
],
},
{
value: "3",
label: "Level One 3",
children: [
{
value: "3-1",
label: "Level Two 3-1",
children: [
{
value: "3-1-1",
label: "Level Three 3-1-1",
},
],
},
{
value: "3-2",
label: "Level Two 3-2",
children: [
{
value: "3-2-1",
label: "Level Three 3-2-1",
},
],
},
],
},
]
}
},
methods: {
handleNodeChange(e) {
console.log(e);
}
}
}
</script>
:::
Disabled Selection
Disable options using the disabled field.
:::demo
<el-tree-select
placeholder="Select"
v-model="value"
:data="data"
/>
<script>
export default {
data() {
return {
value: "",
data: [
{
value: "1",
label: "Level One 1",
disabled: true,
children: [
{
value: "1-1",
label: "Level Two 1-1",
disabled: true,
children: [
{
value: "1-1-1",
label: "Level Three 1-1-1",
disabled: true,
},
],
},
],
},
{
value: "2",
label: "Level One 2",
children: [
{
value: "2-1",
label: "Level Two 2-1",
children: [
{
value: "2-1-1",
label: "Level Three 2-1-1",
},
],
},
{
value: "2-2",
label: "Level Two 2-2",
children: [
{
value: "2-2-1",
label: "Level Three 2-2-1",
},
],
},
],
},
{
value: "3",
label: "Level One 3",
children: [
{
value: "3-1",
label: "Level Two 3-1",
children: [
{
value: "3-1-1",
label: "Level Three 3-1-1",
},
],
},
{
value: "3-2",
label: "Level Two 3-2",
children: [
{
value: "3-2-1",
label: "Level Three 3-2-1",
},
],
},
],
},
]
}
},
}
</script>
:::
Filterable
Use keyword filtering or custom filtering methods. filterMethod can custom filter method for data.
:::demo
<el-row :gutter="12">
<el-col :span="12">
<p>filterable</p>
<el-tree-select
placeholder="Select"
v-model="value1"
:data="data"
filterable
/>
</el-col>
<el-col :span="12">
<p>filterMethod</p>
<el-tree-select
placeholder="Select"
v-model="value2"
:data="data"
filterable
:filter-method="filterMethod"
/>
</el-col>
</el-row>
<script>
export default {
data() {
return {
value1: "",
value2: "",
data: [
{
value: "1",
label: "Level One 1",
children: [
{
value: "1-1",
label: "Level Two 1-1",
children: [
{
value: "1-1-1",
label: "Level Three 1-1-1",
},
],
},
],
},
{
value: "2",
label: "Level One 2",
children: [
{
value: "2-1",
label: "Level Two 2-1",
children: [
{
value: "2-1-1",
label: "Level Three 2-1-1",
},
],
},
{
value: "2-2",
label: "Level Two 2-2",
children: [
{
value: "2-2-1",
label: "Level Three 2-2-1",
},
],
},
],
},
{
value: "3",
label: "Level One 3",
children: [
{
value: "3-1",
label: "Level Two 3-1",
children: [
{
value: "3-1-1",
label: "Level Three 3-1-1",
},
],
},
{
value: "3-2",
label: "Level Two 3-2",
children: [
{
value: "3-2-1",
label: "Level Three 3-2-1",
},
],
},
],
},
]
}
},
methods: {
filterMethod(value, data) {
return data.value.indexOf(value) !== -1;
}
}
}
</script>
:::
LazyLoad
Lazy loading of tree nodes, suitable for large data lists.
:::demo
<el-tree-select
:props="props"
placeholder="Select"
v-model="value"
clearable
filterable
lazy
:filterMethod="filterMethod"
:load="loadNode"
node-key="id"
/>
<script>
export default {
data() {
return {
value: "",
props: {
label: "name",
children: "zones",
isLeaf: "leaf",
},
}
},
methods: {
loadNode(node, resolve) {
if (node.level === 0) {
return resolve([{ id: "0", name: "Trunk" }]);
}
if (node.level > 3) return resolve([]);
setTimeout(() => {
const data = [
{
id: `leaf-${node.level}`,
name: `Leaf ${node.level}`,
leaf: true,
},
{
id: `branch-${node.level}`,
name: `Branch ${node.level}`,
},
];
resolve(data);
}, 500);
},
filterMethod(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
}
}
</script>
:::
Attributes
| Name | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| value / v-model | binding value | boolean / string / number | — | — |
| data | tree data | array | — | — |
| multiple | whether multiple-select is activated | boolean | — | false |
| disabled | whether Select is disabled | boolean | — | false |
| size | size of Input | string | medium/small/mini | — |
| clearable | whether select can be cleared | boolean | — | false |
| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | — | false |
| name | the name attribute of Tree-select input | string | — | — |
| placeholder | placeholder | string | — | 请选择 |
| filterable | whether Tree-select is filterable | boolean | — | false |
| empty-text | displayed text when there is no data | String | — | — |
| node-key | unique identity key name for nodes, its value should be unique across the whole tree | String | — | — |
| props | configuration options, see the following table | object | — | — |
| render-after-expand | whether to render child nodes only after a parent node is expanded for the first time | boolean | — | true |
| load | method for loading subtree data, only works when lazy is true | function(node, resolve) | — | — |
| default-expand-all | whether to expand all nodes by default | boolean | — | false |
| auto-expand-parent | whether to expand father node when a child node is expanded | boolean | — | true |
| show-checkbox | whether node is selectable | boolean | — | false |
| check-strictly | whether checked state of a node not affects its father and child nodes when show-checkbox is true | boolean | — | false |
| filter-method | custom filter method | Function(value, data, node) | — | — |
| accordion | whether only one node among the same level can be expanded at one time | boolean | — | false |
| indent | horizontal indentation of nodes in adjacent levels in pixels | number | — | 16 |
| lazy | whether to lazy load leaf node, used with load attribute | boolean | — | false |
| popper-append-to-body | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean | - | true |
props
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| label | specify which key of node object is used as the node's label | string, function(data, node) | — | — |
| children | specify which node object is used as the node's subtree | string | — | — |
| disabled | specify which key of node object represents if node's checkbox is disabled | boolean, function(data, node) | — | — |
| isLeaf | specify whether the node is a leaf node, only works when lazy load is enabled | boolean, function(data, node) | — | — |
Events
| Method | Description | Parameters |
|---|---|---|
| change | triggers when the selected value changes | current selected value |
| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |
| remove-tag | triggers when a tag is removed in multiple mode | removed tag value |
| clear | triggers when the clear icon is clicked in a clearable Select | — |
| blur | triggers when Input blurs | (event: Event) |
| focus | triggers when Input focuses | (event: Event) |