ant design vue2 TreeSelect 滚到到选中的节点_vue2antd a-tree-select-node selectable-CSDN博客

本文链接：https://blog.csdn.net/junkegui/article/details/129726131

文章介绍了在Vue2项目中，如何在AntDesignVue2的Tree组件数据量大时，模拟AntDesignVue3的scrollTo()方法，通过scrollIntoView()将视图滚动到选中节点。关键步骤包括获取选中节点的样式名，然后利用文档对象的getElementsByClassName()找到元素并执行scrollIntoView()。由于Vue2没有直接的打开下拉面板方法，作者建议通过获取焦点的方式来触发面板打开。文章最后提倡使用Vue3以利用更多现成的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用vue2项目可能会有这样的需求：当tree的数据庞大时，为了用户体检，在打开下拉面板的时候需要滚到到选中节点的位置。其实在ant design vue3的组件官方提供了scrollTo()的方法，但是vue2并没有这个方法，所以需要自己写。

这里我直接使用简单粗暴的方式，用scrollIntoView()方法滚动到指定元素就好了。

注意: 需要打开虚拟滚动，不然会不生效哦

具体做法如下：

1、先获取要滚到的元素的样式名

由于各个版本的样式名可能不同，我们之间使用浏览器选择元素的功能，选中对应元素（即tree选中的节点，这里是ant-select-tree-node-selected），

2. 然后使用document.getElementsByClassName('样式名')获取该元素，也可以使用其它的方法，只要能拿到dom元素就行，后使用scrollIntoView()

// 主要代码
if (document.getElementsByClassName('ant-select-tree-node-selected').length > 0) {
    document.getElementsByClassName('ant-select-tree-node-selected')[0].scrollIntoView()
}

这里插一句，一般业务需求是打开面板再滚动到指定位置，而且只有打开面板tree才会开始渲染，所以这段代码必须写在tree渲染完成之后，但是ant design vue2并没有提供打开下拉面板的方法，只有vue3才有。