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.
<template>
<el-tree-select
v-model="value"
:data="data"
:render-after-expand="false"
style="width: 240px"
/>
<el-divider />
show checkbox:
<el-tree-select
v-model="value"
:data="data"
:render-after-expand="false"
show-checkbox
style="width: 240px"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref()
const 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',
},
],
},
],
},
]
</script>
Select any level
When using the check-strictly=true
attribute, any node can be checked, otherwise only leaf nodes are supported.
<template>
<el-tree-select
v-model="value"
:data="data"
check-strictly
:render-after-expand="false"
style="width: 240px"
/>
<el-divider />
show checkbox(only click checkbox to select):
<el-tree-select
v-model="value"
:data="data"
check-strictly
:render-after-expand="false"
show-checkbox
style="width: 240px"
/>
<el-divider />
show checkbox with `check-on-click-node`:
<el-tree-select
v-model="value"
:data="data"
check-strictly
:render-after-expand="false"
show-checkbox
check-on-click-node
style="width: 240px"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref()
const 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',
},
],
},
],
},
]
</script>
TIP
When using show-checkbox
, since check-on-click-node
is false by default, it can only be selected by checking, you can set it to true, and then click the node to select.
Multiple Selection
Multiple selection using clicks or checkbox.
<template>
<el-tree-select
v-model="value"
:data="data"
multiple
:render-after-expand="false"
style="width: 240px"
/>
<el-divider />
show checkbox:
<el-tree-select
v-model="value"
:data="data"
multiple
:render-after-expand="false"
show-checkbox
style="width: 240px"
/>
<el-divider />
show checkbox with `check-strictly`:
<el-tree-select
v-model="valueStrictly"
:data="data"
multiple
:render-after-expand="false"
show-checkbox
check-strictly
check-on-click-node
style="width: 240px"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref()
const valueStrictly = ref()
const 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',
},
],
},
],
},
]
</script>
Disabled Selection
Disable options using the disabled field.
<template>
<el-tree-select v-model="value" :data="data" style="width: 240px" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref()
const data = [
{
value: '1',
label: 'Level one 1',
disabled: true,
children: [
{
value: '1-1',
label: 'Level two 1-1',
disabled: true,
children: [
{
disabled: true,
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',
},
],
},
],
},
]
</script>
Filterable
Use keyword filtering or custom filtering methods. filterMethod
can custom filter method for data, filterNodeMethod
can custom filter method for data node.
<template>
<el-tree-select
v-model="value"
:data="data"
filterable
style="width: 240px"
/>
<el-divider />
filter method:
<el-tree-select
v-model="value"
:data="data"
:filter-method="filterMethod"
filterable
style="width: 240px"
/>
<el-divider />
filter node method:
<el-tree-select
v-model="value"
:data="data"
:filter-node-method="filterNodeMethod"
filterable
style="width: 240px"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref()
const sourceData = [
{
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',
},
],
},
],
},
]
const data = ref(sourceData)
const filterMethod = (value) => {
data.value = [...sourceData].filter((item) => item.label.includes(value))
}
const filterNodeMethod = (value, data) => data.label.includes(value)
</script>
Custom content
Contents of custom tree nodes.
<template>
<el-tree-select v-model="value" :data="data" style="width: 240px">
<template #default="{ data: { label } }">
{{ label }}<span style="color: gray">(suffix)</span>
</template>
</el-tree-select>
<el-divider />
use render content:
<el-tree-select
v-model="value"
:data="data"
:render-content="renderContent"
style="width: 240px"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref()
const renderContent = (h, { data }) => {
return h(
'span',
{
style: {
color: '#626AEF',
},
},
data.label
)
}
const 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',
},
],
},
],
},
]
</script>
LazyLoad
Lazy loading of tree nodes, suitable for large data lists.
<template>
<el-tree-select
v-model="value"
lazy
:load="load"
:props="props"
style="width: 240px"
/>
<el-divider />
<VersionTag version="2.2.26" /> show lazy load label:
<el-tree-select
v-model="value2"
lazy
:load="load"
:props="props"
:cache-data="cacheData"
style="width: 240px"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref()
const value2 = ref(5)
const cacheData = [{ value: 5, label: 'lazy load node5' }]
const props = {
label: 'label',
children: 'children',
isLeaf: 'isLeaf',
}
let id = 0
const load = (node, resolve) => {
if (node.isLeaf) return resolve([])
setTimeout(() => {
resolve([
{
value: ++id,
label: `lazy load node${id}`,
},
{
value: ++id,
label: `lazy load node${id}`,
isLeaf: true,
},
])
}, 400)
}
</script>
API
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.
Own Attributes
Name | Description | Type | Default |
---|---|---|---|
cacheData 2.2.26 | The cached data of the lazy node, the structure is the same as the data, used to get the label of the unloaded data | object | [] |
Type Declarations
Show declarations
type CacheOption = {
value: string | number | boolean | object
currentLabel: string | number
isDisabled: boolean
}