工作记录：获取ElTree 展开、折叠高度、更新ElSelect 中 popper位置

最近在自定义的select-tree实现的功能同TreeSelect 相同的功能。

问题：

悬浮的popper默认的时候是ElTree折叠的时候，高度真好离边界有一定距离，但是点击展开数节点的时候，高度变化，超过了边界，被挡住了。

如图：

点击展开的时候，内容被盖住

想要实现的效果：

超过最大高度后，定位到上方，边界距离未超过浮层最大高度的时候，展示在下方

定位问题：

由于是展开，折叠引起的高度变化，第一步在ElTree 展开、折叠回调函数处理定位变化。

注意： setTimeout 时间 为什么是300ms? 这里很关键。

const handleNodeExpand = (data: TreeNodeData, node: Node, el:ComponentInternalInstance)=>{
  changePosition()
}
const handleNodeCollapse = (data: TreeNodeData, node: Node, el:ComponentInternalInstance)=>{
  changePosition()
}
const timerRef = ref()
const changePosition = (el:ComponentInternalInstance)=>{
  // 渲染内容区域
  const contentRef = main.value.tooltipRef.popperRef.contentRef
  //popper实例
  const popperInstanceRef = main.value.tooltipRef.popperRef.popperInstanceRef

  clearTimeout(timerRef.value)
  timerRef.value = setTimeout(()=>{
    watch(
    () => contentRef.getBoundingClientRect().height,
    (val) => {
      // 更新定位
      popperInstanceRef.update()
    }, {
      immediate:true
    })
  },300)
}

浮层更新方法

const popperInstanceRef = main.value.tooltipRef.popperRef.popperInstanceRef
popperInstanceRef.update()

监听展开折叠高度变化

由于element-plus 内部treeNode 内部是有过渡动画效果的，transition 的过渡动画时间默认是300ms,fast 是200ms 。所以一定要在动画渲染完成后，才能获取到当前展开和折叠后的高度。

点击展开按钮发现，展开后执行展开方法后，再进行回调函数处理，这一步没问题。折叠是回调先执行再折叠，所以我们要用setTimeout 方法获取最终的位置。 内部有动画transition

一步步找到，原来之前操作那么多次，查找的高度不准就是过渡时间没找对。现在找到后，只要晚于300ms 定位获取就没有偏差。

破案了，结束~