TreeSelect 树选择

下拉面板中以树形结构选择叶子节点。

基础用法

<script setup>
import { ref } from 'vue'
import { DanTreeSelect } from '@dandan-ui/ui'

const value = ref(null)
const data = [
  {
    id: 1,
    label: '一级 1',
    children: [
      { id: 11, label: '二级 1-1' },
      { id: 12, label: '二级 1-2' },
    ],
  },
  {
    id: 2,
    label: '一级 2',
    children: [{ id: 21, label: '二级 2-1' }],
  },
]
</script>

<template>
  <DanTreeSelect v-model="value" :data="data" clearable />
</template>

API

Props

属性	说明	类型	默认值
modelValue / v-model	选中节点 id	string | number | null	null
data	树数据	TreeNode[]	[]
disabled	是否禁用	boolean	false
clearable	是否可清空	boolean	false
placeholder	占位文案	string	请选择

Events

事件	说明	参数
update:modelValue	选中变化	(value)
change	选中变化	(value)
clear	清空时触发	—