el-tree-v2(TreeV2)是 Element Plus 提供的虚拟化树组件,适合渲染大型层级数据集(1000+ 节点)与对性能要求较高的树形视图,如文件系统浏览器。
基础用法为在 Vue 模板中引入组件并传入数据、props 配置和高度,例如:<el-tree-v2 :data="data" :props="defaultProps" :height="200" />。
主要能力包括:显示复选框(show-checkbox)、默认展开键(default-expanded-keys)与默认选中键(default-checked-keys)、父子独立选中(check-strictly)、当前节点高亮与当前节点键、节点点击展开或选中、自定义图标与缩进。可通过默认插槽自定义节点内容,接收 { node, data }。
过滤方面,设置 filter-method(如 (query, data, node) => boolean),并通过组件暴露的 filter(query) 方法触发;常用做法是监听输入框变化后调用 treeRef.value.filter(val)。
props 配置支持指定 value、label、children、disabled 以及自定义节点类名。组件暴露多种方法,包括 filter、getCheckedNodes、getCheckedKeys、setCheckedKeys、setChecked、setExpandedKeys、getHalfCheckedNodes、getHalfCheckedKeys、getCurrentKey、getCurrentNode、setCurrentKey、getNode、expandNode、collapseNode、setData、scrollTo、scrollToNode。事件涵盖 node-click、node-drop、node-contextmenu、check-change、check、current-change、node-expand、node-collapse。插槽有 default 与 empty。
使用限制与建议:面向大数据量场景,应根据节点实际高度设置 item-size(默认 26);大数据响应式更新建议使用 setData;height 默认 200,可按需调整。资料未提供安装命令、版本要求、收费与授权信息。