SuperAPI AI 工具集

el-tree

智能体与模型

查看项目

更新于 10-15 23:32

技能介绍

用途:展示具有层级关系的数据,如文件夹/目录结构、组织架构图、分类选择、嵌套菜单导航等任何层级数据表示。

主要能力:复选框选择(show-checkbox)、节点过滤(filter-node-method)、懒加载子节点(lazy + load)、手风琴模式(accordion)、拖拽排序(draggable,配合 allow-drop / allow-drag)、自定义节点内容(default 插槽)、空数据内容(empty 插槽)。

基本用法:模板中写 el-tree,通过 :data 传入树数据,:props 配置 label、children 等字段映射。示例:<el-tree :data="data" :props="defaultProps" />。

选择与操作:设置 node-key 与 show-checkbox 后可获取选中节点与键,通过组件 ref 调用 getCheckedNodes、getCheckedKeys、setCheckedKeys 等方法;还可使用 append、remove、insertBefore、insertAfter、getNode 进行动态增删。

过滤:使用 el-input 绑定 filterText,watch 其变化后调用 treeRef.value.filter(val),配合 filter-node-method 定义匹配逻辑。

事件:支持 node-click、check-change、current-change、node-expand、node-collapse 以及 node-drag-start、node-drag-enter、node-drag-leave、node-drag-over、node-drag-end、node-drop 等拖拽事件。

限制与建议:使用选择功能时建议始终设置 node-key;大数据集建议启用懒加载以提升性能;需要父子选择相互独立时可使用 check-strictly;空间受限布局可考虑 accordion 模式。标签文字、禁用状态、叶子节点判断等字段均可通过 props 配置为字符串或函数。