TreeSelect 树形选择

含有下拉菜单的树形选择器，结合了 el-tree 和 el-select 的能力，适合在层级数据中完成单选、多选和筛选。

基础用法

使用 data 传入树形数据，默认通过 value 作为绑定值、label 作为展示文本、children 作为子节点。

请选择组织

vue

<template>
  <el-tree-select
    v-model="value"
    :data="data"
    :render-after-expand="false"
    placeholder="请选择组织"
    style="width: 240px"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref()

const data = [
  {
    value: 'sales',
    label: '销售中心',
    children: [{ value: 'sales-east', label: '华东销售' }],
  },
]
</script>

选择任意级别

设置 check-strictly 后，父节点与子节点不再联动，任意层级的节点都可以被选中。

任意级别

复选框选择

vue

<template>
  <el-tree-select
    v-model="value"
    :data="data"
    check-strictly
    placeholder="任意级别"
  />

  <el-tree-select
    v-model="checkedValue"
    :data="data"
    check-strictly
    show-checkbox
    check-on-click-node
    placeholder="复选框选择"
  />
</template>

多选

设置 multiple 可以选择多个节点。多选时可搭配 show-checkbox、collapse-tags 和 collapse-tags-tooltip 提升展示效率。

vue

<template>
  <el-tree-select
    v-model="value"
    :data="data"
    multiple
    show-checkbox
    collapse-tags
    collapse-tags-tooltip
    placeholder="请选择多个组织"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(['sales-east', 'delivery'])
</script>

禁用选项

在节点数据中设置 disabled 可以禁用单个节点及其选择能力。

含禁用选项

vue

<template>
  <el-tree-select v-model="value" :data="data" placeholder="含禁用选项" />
</template>

<script setup lang="ts">
const data = [
  {
    value: 'archive',
    label: '归档部门',
    disabled: true,
  },
]
</script>

可筛选

设置 filterable 后可以按关键字筛选节点；需要自定义规则时使用 filter-node-method。

搜索组织

按名称搜索

vue

<template>
  <el-tree-select
    v-model="value"
    :data="data"
    filterable
    clearable
    :filter-node-method="filterNode"
    placeholder="按名称搜索"
  />
</template>

<script setup lang="ts">
const filterNode = (keyword: string, data: { label: string }) =>
  data.label.includes(keyword)
</script>

自定义内容

通过默认插槽自定义树节点内容，适合展示状态、数量或辅助说明。

自定义节点

vue

<template>
  <el-tree-select v-model="value" :data="data" placeholder="自定义节点">
    <template #default="{ data }">
      <span>{{ data.label }}</span>
      <span>{{ data.value }}</span>
    </template>
  </el-tree-select>
</template>

懒加载

设置 lazy 并提供 load 方法后，节点会在展开时按需加载，适合数据量较大的树。

vue

<template>
  <el-tree-select
    v-model="value"
    lazy
    :load="load"
    :props="props"
    placeholder="懒加载节点"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref()
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: `节点 ${id}` },
      { value: ++id, label: `节点 ${id}`, isLeaf: true },
    ])
  }, 300)
}
</script>

使用 node-key

当节点数据不使用默认 value 字段作为唯一标识时，需要设置 node-key。node-key 在整棵树中应保持唯一。

vue

<template>
  <el-tree-select
    v-model="value"
    :data="data"
    node-key="id"
    show-checkbox
    multiple
    default-expand-all
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref([2])
const data = [
  {
    id: 1,
    label: '销售中心',
    children: [{ id: 2, label: '华东销售' }],
  },
]
</script>

TreeSelect API

TreeSelect 是 Tree 与 Select 的组合组件，Tree 和 Select 的原始属性、事件、插槽和暴露方法可继续使用。

TreeSelect 自有属性

属性名	说明	类型	默认值
cache-data	懒加载节点的缓存数据，用于展示尚未加载节点的标签	`array`	`[]`

常用 Select 属性

属性名	说明	类型	默认值
model-value / v-model	绑定值	`string \| number \| boolean \| array`	`-`
multiple	是否多选	`boolean`	`false`
disabled	是否禁用选择器	`boolean`	`false`
clearable	是否可以清空	`boolean`	`false`
filterable	是否可筛选	`boolean`	`false`
collapse-tags	多选时是否折叠标签	`boolean`	`false`
collapse-tags-tooltip	折叠标签时是否通过 tooltip 展示全部标签	`boolean`	`false`
placeholder	占位文本	`string`	`请选择`
size	输入框尺寸	`large \| default \| small`	`default`

常用 Tree 属性

属性名	说明	类型	默认值
data	展示数据	`array`	`[]`
props	配置选项，指定 label、children、disabled 等字段	`object`	`-`
node-key	每个树节点用作唯一标识的属性	`string`	`-`
show-checkbox	节点是否可被复选框选择	`boolean`	`false`
check-strictly	父子节点是否取消联动	`boolean`	`false`
check-on-click-node	是否点击节点即可选中复选框	`boolean`	`false`
check-on-click-leaf	是否点击叶子节点即可选中复选框	`boolean`	`true`
default-expand-all	是否默认展开所有节点	`boolean`	`false`
render-after-expand	是否在第一次展开节点后才渲染子节点	`boolean`	`true`
lazy	是否懒加载子节点	`boolean`	`false`
load	加载子树数据的方法	`function`	`-`
filter-node-method	对树节点进行筛选的方法	`function`	`-`

TreeSelect 暴露

名称	说明	类型
treeRef	Tree 组件实例	`TreeInstance`
selectRef	Select 组件实例	`SelectInstance`

TreeSelect 树形选择 ​

基础用法 ​

选择任意级别 ​

多选 ​

禁用选项 ​

可筛选 ​

自定义内容 ​

懒加载 ​

使用 node-key ​

TreeSelect API ​

TreeSelect 自有属性 ​

常用 Select 属性 ​

常用 Tree 属性 ​

TreeSelect 暴露 ​