在使用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才有。
但是我们可以使用官方提供的另一个方法
获取焦点,那不就是鼠标选中下拉框吗,一般选中下拉框,下拉面板就是自动打开,正好符合我们的需求,所以完整的代码应该是这样。
延迟可加可不加
最后插一句,以后想用最新的组件库的话还是使用vue3来写项目吧,不然很多现成的方法用不了,还得自己写,可烦了(我要偷懒我要偷懒)