TreeSelect 树形选择
含有下拉菜单的树形选择器，结合了 w-tree 和 w-select 两个组件的功能。
基础用法
树状选择器
单选
基础用法：使用 disabled 字段禁用选项
请选择
show checkbox
请选择
禁用
请选择
禁用
多选
基础用法：使用 disabled 字段禁用选项
请选择
show checkbox
请选择
show checkbox with `check-strictly`:
请选择
禁用
请选择
禁用
vue
<template>
<div class="mb-4">
<w-title>单选</w-title>
<div class="flex gap-4 flex-wrap">
<div>
<div class="desc">基础用法：使用 disabled 字段禁用选项</div>
<w-tree-select
v-model="value1"
:data="data"
:render-after-expand="false"
style="width: 240px"
/>
</div>
<div>
<div class="desc">show checkbox</div>
<w-tree-select
v-model="value1"
:data="data"
:render-after-expand="false"
show-checkbox
style="width: 240px"
/>
</div>
<div>
<div class="desc">禁用</div>
<w-tree-select
v-model="value1"
:data="data"
disabled
:render-after-expand="false"
style="width: 240px"
/>
</div>
<div>
<div class="desc">禁用</div>
<w-tree-select
v-model="value4"
:data="data"
disabled
:render-after-expand="false"
style="width: 240px"
/>
</div>
</div>
</div>
<w-divider />
<div class="mb-4">
<w-title>多选</w-title>
<div class="flex gap-4 flex-wrap">
<div>
<div class="desc">基础用法：使用 disabled 字段禁用选项</div>
<w-tree-select
v-model="value2"
:data="data"
multiple
:render-after-expand="false"
style="width: 240px"
/>
</div>
<div>
<div class="desc">show checkbox</div>
<w-tree-select
v-model="value2"
:data="data"
multiple
:render-after-expand="false"
show-checkbox
style="width: 240px"
/>
</div>
<div>
<div class="desc">show checkbox with `check-strictly`:</div>
<w-tree-select
v-model="value3"
:data="data"
multiple
:render-after-expand="false"
show-checkbox
check-strictly
check-on-click-node
style="width: 240px"
/>
</div>
<div>
<div class="desc">禁用</div>
<w-tree-select
v-model="value2"
disabled
:data="data"
multiple
:render-after-expand="false"
style="width: 240px"
/>
</div>
<div>
<div class="desc">禁用</div>
<w-tree-select
v-model="value5"
:data="data"
multiple
disabled
:render-after-expand="false"
style="width: 240px"
/>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value1 = ref()
const value4 = ref('1-1-1')
const value2 = ref([])
const value3 = ref([])
const value5 = ref(['1-1-1'])
const data = [
{
value: '1',
label: '数据 one 1',
children: [
{
value: '1-1',
label: '数据 two 1-1',
disabled: true,
children: [
{
value: '1-1-1',
label: '数据 three 1-1-1',
},
],
},
],
},
{
value: '2',
label: '数据 one 2',
children: [
{
value: '2-1',
label: '数据 two 2-1',
children: [
{
value: '2-1-1',
label: '数据 three 2-1-1',
disabled: true,
},
],
},
{
value: '2-2',
label: '数据 two 2-2',
children: [
{
value: '2-2-1',
label: '数据 three 2-2-1',
},
],
},
],
},
{
value: '3',
label: '数据 one 3',
children: [
{
value: '3-1',
label: '数据 two 3-1',
children: [
{
value: '3-1-1',
label: '数据 three 3-1-1',
},
],
},
{
value: '3-2',
label: '数据 two 3-2',
children: [
{
value: '3-2-1',
label: '数据 three 3-2-1',
},
],
},
],
},
]
</script>
<style lang="scss" scoped>
.desc {
margin-bottom: 12px;
font-size: 14px;
}
</style>隐藏源代码
选择任意级别
当属性 check-strictly=true 时，任何节点都可以被选择，否则只有子节点可被选择。
请选择
请选择
请选择
vue
<template>
<w-tree-select
v-model="value"
:data="data"
check-strictly
:render-after-expand="false"
style="width: 240px"
/>
<w-divider />
show checkbox(only click checkbox to select):
<w-tree-select
v-model="value"
:data="data"
check-strictly
:render-after-expand="false"
show-checkbox
style="width: 240px"
/>
<w-divider />
show checkbox with `check-on-click-node`:
<w-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: '数据 one 1',
children: [
{
value: '1-1',
label: '数据 two 1-1',
children: [
{
value: '1-1-1',
label: '数据 three 1-1-1',
},
],
},
],
},
{
value: '2',
label: '数据 one 2',
children: [
{
value: '2-1',
label: '数据 two 2-1',
children: [
{
value: '2-1-1',
label: '数据 three 2-1-1',
},
],
},
{
value: '2-2',
label: '数据 two 2-2',
children: [
{
value: '2-2-1',
label: '数据 three 2-2-1',
},
],
},
],
},
{
value: '3',
label: '数据 one 3',
children: [
{
value: '3-1',
label: '数据 two 3-1',
children: [
{
value: '3-1-1',
label: '数据 three 3-1-1',
},
],
},
{
value: '3-2',
label: '数据 two 3-2',
children: [
{
value: '3-2-1',
label: '数据 three 3-2-1',
},
],
},
],
},
]
</script>隐藏源代码
TIP
当使用 show-checkbox时，由于 check-on-click-node 默认值是 false，这时候只能通过 checkbox 来选中，当然您也可以将其设置成 true，这样点击整个 node 都可以用来完成选择
可筛选
使用关键字筛选或自定义筛选方法。 filterMethod可以自定义数据筛选的方法， filterNodeMethod可以自定义节点数据筛选的方法。
请选择
请选择
请选择
vue
<template>
<w-tree-select v-model="value" :data="data" filterable style="width: 240px" />
<w-divider />
filter method:
<w-tree-select
v-model="value"
:data="data"
:filter-method="filterMethod"
filterable
style="width: 240px"
/>
<w-divider />
filter node method:
<w-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: '数据 one 1',
children: [
{
value: '1-1',
label: '数据 two 1-1',
children: [
{
value: '1-1-1',
label: '数据 three 1-1-1',
},
],
},
],
},
{
value: '2',
label: '数据 one 2',
children: [
{
value: '2-1',
label: '数据 two 2-1',
children: [
{
value: '2-1-1',
label: '数据 three 2-1-1',
},
],
},
{
value: '2-2',
label: '数据 two 2-2',
children: [
{
value: '2-2-1',
label: '数据 three 2-2-1',
},
],
},
],
},
{
value: '3',
label: '数据 one 3',
children: [
{
value: '3-1',
label: '数据 two 3-1',
children: [
{
value: '3-1-1',
label: '数据 three 3-1-1',
},
],
},
{
value: '3-2',
label: '数据 two 3-2',
children: [
{
value: '3-2-1',
label: '数据 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>
<w-tree-select v-model="value" :data="data" style="width: 240px">
<template #default="{ data: { label } }">
{{ label }}<span style="color: gray">(suffix)</span>
</template>
</w-tree-select>
<w-divider />
use render content:
<w-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: '数据 one 1',
children: [
{
value: '1-1',
label: '数据 two 1-1',
children: [
{
value: '1-1-1',
label: '数据 three 1-1-1',
},
],
},
],
},
{
value: '2',
label: '数据 one 2',
children: [
{
value: '2-1',
label: '数据 two 2-1',
children: [
{
value: '2-1-1',
label: '数据 three 2-1-1',
},
],
},
{
value: '2-2',
label: '数据 two 2-2',
children: [
{
value: '2-2-1',
label: '数据 three 2-2-1',
},
],
},
],
},
{
value: '3',
label: '数据 one 3',
children: [
{
value: '3-1',
label: '数据 two 3-1',
children: [
{
value: '3-1-1',
label: '数据 three 3-1-1',
},
],
},
{
value: '3-2',
label: '数据 two 3-2',
children: [
{
value: '3-2-1',
label: '数据 three 3-2-1',
},
],
},
],
},
]
</script>隐藏源代码
懒加载
树节点懒加载，更加适合于数据量大的列表。
请选择
vue
<template>
<w-tree-select
v-model="value"
lazy
:load="load"
:props="props"
style="width: 240px"
/>
<w-divider />
show lazy load label:
<w-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
由于这个组件是w-tree和w-select的结合体，他们的原始属性未被更改，故不在此重复。请跳转查看原组件的相应文档。
Own Attributes
| 属性名 | 详情 | 类型 | 默认值 |
|---|---|---|---|
| cacheData | 懒加载节点的缓存数据，结构与数据相同，用于获取未加载数据的标签 | object | [] |
类型声明
显示类型声明
ts
type CacheOption = {
value: string | number | boolean | object
currentLabel: string | number
isDisabled: boolean
}Copyright 2025 Winning Health 版权所有