TreeSelect 树形选择
下拉菜单的树形选择器，它结合了 el-tree 和 el-select 组件的功能。
基础用法
用于树形结构的选择器。
选择器
选择器
vue
<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>隐藏源代码
选择任意级别
当使用 check-strictly=true 属性时，任何节点都可以被选中，否则只有叶子节点被支持。
提示
使用 show-checkbox 时，由于 check-on-click-node 默认为 false，只能通过勾选来选中，您可以将其设置为 true，然后单击节点进行选择。
选择器
选择器
选择器
vue
<template>
<el-tree-select
v-model="value"
:data="data"
check-strictly
:render-after-expand="false"
style="width: 240px"
/>
<el-divider />
show checkbox:
<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>隐藏源代码
警告
当使用 show-checkbox 时，由于 `check-on-click-leaf` 默认为 true，可以通过点击最后的子节点来选中它们。
多选
使用单击或复选框进行多项选择。
选择器
选择器
选择器
vue
<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 字段来禁用选项。
选择器
vue
<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>隐藏源代码
可筛选
使用关键字过滤或自定义过滤方法。filterMethod 可以自定义数据过滤方法，filterNodeMethod 可以自定义数据节点的过滤方法。
选择器
选择器
选择器
vue
<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>隐藏源代码
自定义内容
自定义树节点的内容。
选择器
选择器
vue
<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>隐藏源代码
懒加载
树节点的懒加载，适用于大数据列表。
选择器
vue
<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>隐藏源代码
使用 node-key 属性
默认情况下，modelValue 正在寻找 value 键。对于不同的数据结构，必须提供 node-key 才能正常工作。
提示
node-key在整个树中应该是唯一的。value-key和node-key的目标相同。- 与 select 组件相反，tree-select 无法检索对象值。
vue
<template>
<el-tree-select
v-model="value"
style="width: 240px"
:data="data"
node-key="id"
show-checkbox
multiple
default-expand-all
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref([2])
const data = [
{
id: 1,
label: 'Level one 1',
children: [
{
id: 2,
label: 'Level two 1-1',
},
{
id: 3,
label: 'Level two 1-2',
},
],
},
]
</script>隐藏源代码
API
属性
由于此组件结合了 el-tree 和 el-select 组件的功能，原始属性没有改变，所以这里不再重复，请到原始组件查看文档。
自身属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| cache-data 2.2.26 | 懒加载节点的缓存数据，结构与数据相同，用于获取未加载数据的标签 | object | [] |
类型声明
显示声明
ts
type CacheOption = {
value: string | number | boolean | object
currentLabel: string | number
isDisabled: boolean
}来源
贡献者
