基于Vue.js构建带交互层级树的最优方案及滚动问题咨询

一、核心选择：优先优化HTML/CSS/JS方案 #

Canvas方案虽能提升布局稳定性，但会彻底牺牲无障碍性与文本交互能力，对于组织架构这类需要高频信息查阅、复制的场景，HTML/CSS/JS仍是更优选择。以下是针对你遇到的滚动移位、焦点丢失问题的具体解决方法：

二、滚动位置维持方案 #

1. 固定独立滚动容器 #

将组织架构树放在独立的滚动容器内，与页面全局滚动分离，避免子节点展开时影响页面其他区域：

.org-tree-container {
  height: 80vh; /* 固定容器高度 */
  overflow-y: auto;
  position: relative;
  width: 100%;
}

2. 展开前后锚定位置 #

在点击展开按钮时，记录当前滚动位置，DOM更新后恢复该位置：

<template>
  <div class="org-tree-container" ref="treeContainer">
    <OrgNode 
      v-for="node in treeData" 
      :key="node.id" 
      :node="node"
      @expand="handleNodeExpand"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [], // 组织架构数据
      prevScrollTop: 0
    }
  },
  methods: {
    handleNodeExpand(node, triggerEl) {
      // 记录展开前的滚动位置
      const container = this.$refs.treeContainer
      this.prevScrollTop = container.scrollTop
      
      // 切换展开状态
      node.expanded = !node.expanded
      
      // DOM更新后恢复滚动位置
      this.$nextTick(() => {
        container.scrollTop = this.prevScrollTop
        // 可选：让触发按钮保持在可视区域
        triggerEl.scrollIntoView({ behavior: 'auto', block: 'nearest' })
      })
    }
  }
}
</script>

三、焦点丢失问题解决 #

手动维护焦点状态，在DOM更新后将焦点放回原交互元素：

<template>
  <div class="node-item">
    <button 
      ref="expandBtn"
      @click="handleExpandClick"
      :aria-expanded="node.expanded"
    >查看更多</button>
    <div v-if="node.expanded" class="node-children">
      <OrgNode v-for="child in node.children" :key="child.id" :node="child" />
    </div>
  </div>
</template>

<script>
export default {
  props: ['node'],
  methods: {
    handleExpandClick() {
      const activeEl = document.activeElement
      // 通知父组件处理展开逻辑
      this.$emit('expand', this.node, this.$refs.expandBtn)
      
      // DOM更新后恢复焦点
      this.$nextTick(() => {
        if (activeEl?.focus) activeEl.focus()
      })
    }
  }
}
</script>

四、稳定的连接线实现 #

用CSS伪元素绘制父子节点连接线，避免DOM移位导致的线条错乱：

<template>
  <div class="node-wrapper">
    <div class="node-content">{{ node.name }}</div>
    <div v-if="node.expanded" class="children-container">
      <OrgNode v-for="child in node.children" :key="child.id" :node="child" />
    </div>
  </div>
</template>

<style scoped>
.node-wrapper {
  position: relative;
  padding-left: 32px;
  margin: 8px 0;
}

/* 水平连接线 */
.node-wrapper::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 0;
  width: 24px;
  height: 1px;
  background-color: #ddd;
}

/* 垂直连接线 */
.node-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background-color: #ddd;
}

/* 最后一个子节点截断垂直连接线 */
.node-wrapper:last-child::after {
  height: 12px;
}
</style>

五、额外优化建议 #

• 虚拟滚动：若节点数量极大，使用虚拟滚动库（如vue-virtual-scroller）仅渲染可视区域节点，减少DOM数量提升性能
• 无障碍增强：给节点添加role="treeitem"、aria-level属性，按钮添加aria-expanded，确保屏幕阅读器正常识别
• 防抖处理：给展开/收起操作添加防抖，避免频繁DOM操作导致的布局抖动

内容的提问来源于stack exchange，提问作者Rekwian