InputTree 树选择

avue-input-tree：单选建议为标量，多选为数组。Form 中使用 type: tree；字典仍是树形 dicData。

通用属性、字典和事件见 基础组件使用约定。模板用 kebab-case，Form 配置对象用 camelCase。

基础用法

效果预览可直接操作下方示例

操作示例并观察绑定值，初始值与字典编码保持相同类型。

正在加载示例…

<template>
  <el-row :gutter="20">
    <el-col :xs="24" :md="12">
      <p>单选任意层级</p>
      <avue-input-tree v-model="single" :dic="options" :check-strictly="true" default-expand-all />
    </el-col>
    <el-col :xs="24" :md="12">
      <p>父子独立多选</p>
      <avue-input-tree v-model="multiple" :dic="options" multiple :check-strictly="true" default-expand-all />
    </el-col>
  </el-row>
  <p>父子关联多选：回调中读取半选节点</p>
  <avue-input-tree v-model="linked" :dic="options" multiple :check-strictly="false" :checked="onChecked" default-expand-all />
  <pre>{{ JSON.stringify({ single, multiple, linked, halfCheckedKeys }, null, 2) }}</pre>
</template>

<script setup>
import { ref } from 'vue';
const single = ref('team');
const multiple = ref(['alice']);
const linked = ref([]);
const halfCheckedKeys = ref([]);
const options = [
  { label: '项目组', value: 'team', children: [
    { label: '成员 A', value: 'alice' },
    { label: '成员 B', value: 'bob' },
  ] },
  { label: '独立成员', value: 'carol' },
];
function onChecked(data, state) {
  halfCheckedKeys.value = state.halfCheckedKeys;
}
</script>

属性

属性	类型	默认值	说明
dic / props	array / object	[] / 默认映射	树形数据与 label/value/children/leaf 映射
multiple	boolean	false	多选并显示复选框
checkStrictly	boolean	单选 true，多选 false	父子节点选中状态是否独立
parent	boolean	true	false 时把有子节点的父节点设为禁用
filterable / filterNodeMethod	boolean / function	false / —	开启过滤、传入自定义节点过滤函数
lazy / treeLoad	boolean / function	false / —	懒加载，treeLoad(node, resolve) 调用 resolve(list)
cacheData	array / object	—	尚未加载节点的回显标签缓存
tags	boolean	false	折叠已选标签
defaultExpandedKeys / defaultExpandAll	array / boolean	— / false	默认展开节点与全部展开
checkOnClickNode / checkOnClickLeaf / expandOnClickNode	boolean	false	节点点击时的勾选/展开行为
accordion / indent	boolean / number	false / —	手风琴与缩进
nodeClick	function	—	(data, node, nodeComponent)
checked	function	—	透传底层 check 参数，通常为 (data, checkState)

默认插槽接收 { item, node, label, value }。getHalfList() 返回勾选节点与半选节点的值数组；如需严格只取半选项，可以从 checked 回调的 checkState.halfCheckedKeys 读取。当前 leafOnly 仅有声明，没有独立处理逻辑，不应依靠它改变提交值。