Tree 树形控件

用清晰的层级结构展示信息的树形控件，支持展开/收起、节点选中、多选复选框 (Checkable)、自定义图标与节点内容插槽。

---

代码示例

1. 基础用法 (Basic Usage)

<template>
  <mu-tree :data="treeData" default-expand-all @select="onSelect" />
</template>

<script setup>
import { ref } from 'vue'

const treeData = ref([
  {
    id: '1',
    label: '核心组件库',
    children: [
      { id: '1-1', label: '按钮 Button' },
      { id: '1-2', label: '弹出层 Popup' }
    ]
  }
])

function onSelect({ key, data }) {
  console.log('当前选中节点:', key, data)
}
</script>

---

2. 多选复选框 (Checkable Tree)

设置 checkable 开启复选框多选模式。

<template>
  <mu-tree
    :data="deptData"
    checkable
    default-expand-all
    @check="onCheck"
  />
</template>

<script setup>
function onCheck({ key, checked, checkedKeys }) {
  console.log('已勾选节点 Key 列表:', checkedKeys)
}
</script>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
data	嵌套树形数据结构数组	Array	-	[]
defaultExpandAll	是否默认展开所有节点	Boolean	true | false	false
expandedKeys	展开节点的 key 数组	Array	-	[]
checkedKeys	勾选节点的 key 数组	Array	-	[]
selectedKey	当前选中的单节点 key	String | Number	-	''
checkable	是否显示复选框支持多选	Boolean	true | false	false
indent	层级缩进缩进量 (rpx)	Number	-	40
fieldNames	自定义节点字段别名	Object	-	{ label: 'label', children: 'children', key: 'id' }

---

事件说明 (Events)

事件名	说明	回调参数
select	点击选中单节点时触发	(res: { key: string/number, data: object })
check	勾选/取消勾选节点复选框时触发	(res: { key, checked, checkedKeys })
expand	展开或折叠节点时触发	(res: { key, expanded })
update:selectedKey	v-model:selectedKey 双向绑定更新	(key: String | Number)
update:checkedKeys	v-model:checkedKeys 双向绑定更新	(keys: Array)
update:expandedKeys	v-model:expandedKeys 双向绑定更新	(keys: Array)

---

插槽说明 (Slots)

插槽名	说明	作用域参数
node	自定义节点渲染模板插槽	{ node: object, isLeaf: boolean, expanded: boolean }