TreeSelect 树选择

在树形结构中选择一项或多项，常用于组织架构、地区选择等场景。

基础用法

通过 data 属性传入树形数据。

请选择

北京市

上海市

<template>
  <ZcTreeSelect v-model="value" :data="treeData" placeholder="请选择" />
</template>
<script setup>
import { ref } from 'vue'

const value = ref(undefined)
const treeData = [
  {
    value: '1',
    label: '北京市',
    children: [
      { value: '1-1', label: '海淀区' },
      { value: '1-2', label: '朝阳区' },
    ],
  },
  {
    value: '2',
    label: '上海市',
    children: [
      { value: '2-1', label: '浦东新区' },
      { value: '2-2', label: '黄浦区' },
    ],
  },
]
</script>

多选

设置 multiple 属性开启多选模式。

前端开发

后端开发

<template>
  <ZcTreeSelect v-model="value" :data="treeData" multiple placeholder="多选模式" clearable />
</template>
<script setup>
import { ref } from 'vue'

const value = ref([])
const treeData = [
  {
    value: '1',
    label: '前端开发',
    children: [
      { value: '1-1', label: 'Vue' },
      { value: '1-2', label: 'React' },
    ],
  },
  {
    value: '2',
    label: '后端开发',
    children: [
      { value: '2-1', label: 'Java' },
      { value: '2-2', label: 'Go' },
    ],
  },
]
</script>

TreeSelect API

Props

参数	说明	类型	默认值
modelValue	绑定值	string | number | (string | number)[]	undefined
data	树形数据	TreeSelectOption[]	[]
placeholder	占位文本	string	'请选择'
disabled	是否禁用	boolean	false
clearable	是否可清空	boolean	false
multiple	是否多选	boolean	false
filterable	是否可搜索	boolean	false
checkStrictly	父子节点不关联	boolean	false
size	尺寸	'large' | 'medium' | 'small'	'medium'

Events

事件名	说明	回调参数
change	值变化时触发	(value)
node-click	节点被点击时触发	(option: TreeSelectOption)
expand	展开/收起时触发	()