element-ui树控件自动定位到当前选择项
原创大约 1 分钟约 445 字...
需求
做业务遇到了需要在树空间中回显示当前操作的的数据项,因为树空间的高度有限,如果当前选择项是比较靠后的,就无法出现在树的滚动视窗范围之内。
所以就要在树展示的时候自动滚动到当前的选择项,好在Element 接口提供了这样一个 scrollIntoView()方法,该方法会滚动元素的父容器,使被调用 scrollIntoView()
的元素对用户可见。
具体思路
那么现在我们只需要知道当前选择项是哪一个 DOM 元素,接着调用这个方法就好,省去了繁琐的高度计算环节。
因为树中的每个数据项都有一个独一无二的 id,所以我们可以使用自定义节点,给每个数据项加上以数据项中的 id 为值的 ID 属性,这样我们通过当前选择项的 id 就可以获得当前对应的 DO M 元素。
实现 demo
See the Pen by zhangfanhang on CodePen.
总结一下
clientWidth
,offsetWidth
,scrollWidth
这几个概念自己有时候还是会弄混,所以在此总结一下。
scrollWidth
包括元素的宽度(width),内边距(padding),但不包括边框(border)、外边距(margin)和垂直滚动条clientWidth
包括元素的宽度(width),内边距(padding),但不包括边框(border)、外边距(margin)和垂直滚动条offsetWidth
对象整体的实际宽度,包含滚动条,会随对象显示大小的变化而改变。