Tree Select 树形选择
下拉树形选择器，结合了 el-tree 与 el-select 的能力。
基础用法
用于树形结构数据的选择。
Select
Select
vue
<template>
<u-tree-select
v-model="value"
:data="data"
:render-after-expand="false"
style="width: 240px"
/>
<u-divider />
show checkbox:
<u-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 时，任意节点均可被选中；否则通常仅叶子节点可选。
TIP
使用 show-checkbox 时，由于 check-on-click-node 默认为 false， 一般只能通过勾选框选择；可将其设为 true 后点击节点即可选择。
Select
Select
Select
vue
<template>
<u-tree-select
v-model="value"
:data="data"
check-strictly
:render-after-expand="false"
style="width: 240px"
/>
<u-divider />
show checkbox:
<u-tree-select
v-model="value"
:data="data"
check-strictly
:render-after-expand="false"
show-checkbox
style="width: 240px"
/>
<u-divider />
show checkbox with `check-on-click-node`:
<u-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>隐藏源代码
WARNING
使用 show-checkbox 时，由于 check-on-click-leaf 默认为 true， 点击末级子节点即可切换其选中状态。
多选
支持点击或复选框进行多选。
Select
Select
Select
vue
<template>
<u-tree-select
v-model="value"
:data="data"
multiple
:render-after-expand="false"
style="width: 240px"
/>
<u-divider />
show checkbox:
<u-tree-select
v-model="value"
:data="data"
multiple
:render-after-expand="false"
show-checkbox
style="width: 240px"
/>
<u-divider />
show checkbox with `check-strictly`:
<u-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>
<u-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>
<u-tree-select
v-model="value"
:data="data"
filterable
style="width: 240px"
/>
<u-divider />
filter method:
<u-tree-select
v-model="value"
:data="data"
:filter-method="filterMethod"
filterable
style="width: 240px"
/>
<u-divider />
filter node method:
<u-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>
<u-tree-select v-model="value" :data="data" style="width: 240px">
<template #default="{ data: { label } }">
{{ label }}<span style="color: gray">(suffix)</span>
</template>
</u-tree-select>
<u-divider />
use render content:
<u-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>
<u-tree-select
v-model="value"
lazy
:load="load"
:props="props"
style="width: 240px"
/>
<u-divider />
<VersionTag version="2.2.26" /> show lazy load label:
<u-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 才能正常工作。
TIP
node-key应在整棵树中唯一。value-key与node-key作用类似。- 与普通选择器不同，
tree-select无法直接以对象作为值。
vue
<template>
<u-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 | 懒加载节点的缓存数据，结构与 data 相同，用于获取未加载节点的标签 | array | [] |
暴露
WARNING
挂载在树与选择子组件上的暴露方法已弃用，请改为通过子组件引用 tree 与 select 调用。
| 名称 | 说明 | 类型 |
|---|---|---|
| treeRef | 树组件实例 | TreeInstance |
| selectRef | 选择器组件实例 | SelectInstance |
类型声明
显示类型声明
ts
type CacheOption = {
value: string | number | boolean | object
currentLabel: string | number
isDisabled: boolean
}