踩坑日记：scrollIntoView的踩坑记录

甲方需求

• 组织架构选择器的左列实现选中并完成自动剧中的效果

技术栈

• vue3
• element-plus

组件构成

• 左侧： Tree 树形控件
• 右侧： Collapse 折叠面板

过程

1.查看组件API，查看是否有相关API

- 开开心心的打开element-plus官网，找到Tree 树形控件，点击方法；

• 没有相关API，芭比扣了

2.询问char-GPT如何实现

• 嘴角忍不住的上扬，这还不拿捏！

  console.log('获取选中节点的信息',dialogTree.treeRef.getNode(current));

• 怎么不一样！我的 treeNode.$el 尼！

• 凉凉夜色为你思念成河

3.推倒重来，重构思路

• 1.确定API：scrollIntoView

• 2.要它滚动可视区域中间就需要；

  • 是一个"Element"元素
  • 通过scrollIntoView参数来使元素滚动到视图中央

      Element?.scrollIntoView({ block: 'center' })

4.实现

• 如何获取他是一个"Element"元素？通过插槽生成动态且唯一的class

         <template #default="{ data }">
                    <span class="custom-tree-node" :class="`treeItem_${data.orgId}`">
                      <span
                        class="iconfont m_rl_2"
                        :class="
                          data.orgType == 1
                            ? 'theme_color icon-jituan'
                            : data.orgType == 2
                            ? 'yellow_color icon-gongsi'
                            : 'cyan_color icon-bumen'
                        "
                      />
                      {{ range === '3' ? `${data.superAllOrgName}-` : '' }}{{ data.orgName }}
                    </span>
                  </template>

• 获取要滚动的节点

     const selectedNode: any = document.querySelector(`.treeItem_${current}`)
     

• 执行API

    selectedNode?.scrollIntoView({ block: 'center' })

5.效果