企业官网建设流程全解析

1. 问题背景与需求分析

在开发后台管理系统时，树形控件(el-tree)是最常用的组件之一。最近在做一个权限配置模块时遇到一个典型场景：管理员需要同时勾选多个树节点，但由于el-tree默认行为是失去焦点后自动隐藏选中状态，导致操作体验非常不友好。

举个例子：当用户勾选了"部门管理"节点后，滚动页面查看其他节点时，之前选中的对勾图标就消失了。虽然实际上节点仍处于选中状态（可以通过getCheckedNodes验证），但视觉反馈的缺失会让用户产生"刚才的选择是不是没保存"的疑惑。这种体验问题在需要跨区域勾选多个节点的场景下尤为明显。

2. 技术实现方案对比

2.1 原生el-tree的选中状态机制

通过阅读element-plus源码发现，el-tree的选中状态视觉反馈是通过CSS的:focus-within伪类控制的。当鼠标移出树容器时，会移除.highlight-current类名，导致选中样式消失。这是为了遵循"最小惊讶原则"的设计规范，但确实不符合我们的业务场景需求。

/* element-plus源码片段 */ .el-tree { &--highlight-current .el-tree-node.is-current > .el-tree-node__content { background-color: var(--el-tree-current-bg-color); } }

2.2 可行的解决方案对比

经过实际验证，最终选择了方案二的自定义指令方式。因为：

1. 不会污染全局样式
2. 可以精确控制目标树实例
3. 不影响其他tree组件的默认行为

3. 完整实现步骤

3.1 创建自定义指令

在项目的directives目录下新建treePersistSelection.js：

export default { mounted(el, binding) { const tree = el.__vue__ // 获取Vue实例 if (!tree || !tree.$options || tree.$options.name !== 'ElTree') { console.warn('v-tree-persist-selection只能用于el-tree组件') return } // 保存原始方法 const oldHandleNodeClick = tree.handleNodeClick tree.handleNodeClick = function(nodeData, node, event) { oldHandleNodeClick.call(this, nodeData, node, event) this.store.setCurrentNode(node) // 强制保持currentNode } // 监听滚动容器 const scrollParent = el.querySelector('.el-tree__inner') if (scrollParent) { scrollParent.addEventListener('scroll', () => { tree.$el.querySelectorAll('.is-current').forEach(node => { node.classList.add('persist-current') }) }) } } }

3.2 全局注册指令

在main.js中注册：

import treePersistSelection from '@/directives/treePersistSelection' app.directive('tree-persist-selection', treePersistSelection)

3.3 添加必要样式

在全局样式中追加：

.el-tree-node__content.persist-current { background-color: var(--el-color-primary-light-9) !important; .el-tree-node__label { color: var(--el-color-primary) !important; font-weight: 500; } }

3.4 组件中使用

<el-tree v-tree-persist-selection :data="treeData" show-checkbox node-key="id" :props="defaultProps" />

4. 关键问题与解决方案

4.1 动态加载数据的处理

当树节点异步加载时，需要额外处理：

// 在指令中添加 const oldLoad = tree.load tree.load = function(node, callback) { oldLoad.call(this, node, () => { callback() this.$nextTick(() => { const currentNode = this.store.currentNode if (currentNode) { const currentEl = this.$el.querySelector( `[data-node-key="${currentNode.key}"]` ) currentEl?.classList.add('persist-current') } }) }) }

4.2 与checkbox联用的注意事项

如果同时使用checkbox和current-node，需要注意：

1. 选中状态（checkbox）和当前节点（current-node）是两个独立概念
2. 建议在指令中增加状态同步逻辑：

tree.$watch('store.currentNode', (node) => { if (node && tree.store) { tree.store.setChecked(node, true) } })

5. 性能优化建议

对于大型树结构（节点数>500），建议：

1. 使用debounce处理scroll事件
2. 添加虚拟滚动支持
3. 限制高亮节点数量（通过max-highlights属性）

// 优化后的scroll处理 const debounceScroll = _.debounce(() => { const nodes = tree.$el.querySelectorAll('.is-current') if (nodes.length > tree.maxHighlights) { // 只保留最后选中的n个 } }, 100) scrollParent.addEventListener('scroll', debounceScroll)

6. 兼容性处理

针对不同版本的element-plus：

1. 2.1.x版本需要处理不同的DOM结构
2. 2.2.x+版本支持composition API写法
3. 对于TypeScript项目，需要添加类型声明：

declare module '@vue/runtime-core' { interface ComponentCustomProperties { vTreePersistSelection: typeof treePersistSelection } }

实际项目中，这个方案已经稳定运行了8个月，支持了8种不同的树形交互场景。核心思路其实是通过指令维护一个持久化的currentNode引用，并通过class强制保持视觉状态。这种方案比直接修改element-plus源码更可控，也比纯CSS方案更灵活。