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对象整体的实际宽度，包含滚动条，会随对象显示大小的变化而改变。