TreeSelect 树形选择
含有下拉菜单的树形选择器,结合了 el-tree
和 el-select
两个组件的功能。
基础用法
树状选择器
Select
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
时,任何节点都可以被选择,否则只有子节点可被选择。
Select
Select
Select
vue
<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
当使用 show-checkbox
时,由于 check-on-click-node
默认值是 false,这时候只能通过 checkbox 来选中,当然您也可以将其设置成 true,这样点击整个 node 都可以用来完成选择
多选
通过点击或复选框选择多个选项。
Select
Select
Select
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 字段禁用选项。
Select
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
可以自定义节点数据筛选的方法。
Select
Select
Select
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>
隐藏源代码
自定义内容
自定义树节点的内容。
Select
Select
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>
隐藏源代码
懒加载
树节点懒加载,更加适合于数据量大的列表。
Select
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>
隐藏源代码
API
Attributes
由于这个组件是el-tree
和el-select
的结合体,他们的原始属性未被更改,故不在此重复。请跳转查看原组件的相应文档。
Own Attributes
属性名 | 详情 | 类型 | 默认值 |
---|---|---|---|
cacheData 2.2.26 | 懒加载节点的缓存数据,结构与数据相同,用于获取未加载数据的标签 | object | [] |
类型声明
显示类型声明
ts
type CacheOption = {
value: string | number | boolean | object
currentLabel: string | number
isDisabled: boolean
}