用途:展示具有层级关系的数据,如文件夹/目录结构、组织架构图、分类选择、嵌套菜单导航等任何层级数据表示。
主要能力:复选框选择(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 配置为字符串或函数。