el-tree选中高亮和搜索框对dom进行操作

一般el-tree的效果为

<el-tree check="" node-click="" node-key='id'/>
​
<el-tree>

如果是这样的状态获取当前选中高亮，以及对搜索的联动比较方便 而我看的el-tree是

<el-tree check="" node-click="" node-key='id'/>
    <template/>
        <div/>
            
        <div>
    <template>
<el-tree>

调用的遍历dom节点函数

const handleTreeHover = (id: number) => {
  // isTreeCheck.value = id
  const nodeNum = Array.from(document.querySelectorAll('.el-tree-node'));
  nextTick(()=>{
    nodeNum.forEach((item: any) => {
      const dataKey = Number(item.getAttribute('data-key'));
      if (dataKey === id) {
        item.classList.add("treeHover");
        void item.offsetWidth;
        isTreeSelect.value = item;
      } else {
        item.classList.remove("treeHover");
      }
    });
  })
}

需要做到在上方的div增加搜索，这个需求非常简单，但是在下方选中高亮效果，node-click和check事件都需要做到选中高亮效果，也不难，难的是node-click事件往往获取的node节点和data不像check事件中可以获取到当前已经选中的节点id列表，所以两个事件需要做到一致，就需要手动进行判断

在node-click调用两者相同的函数时，需要接受第三个参数，index，根据index进行做判断就好

但是我在遍历.el-tree的时候，一直都是看到当前选中节点的classList有我添加的hover类名，但是浏览器元素上无法看到，在我搜索了多个网站后，使用了nextTick，让我调用的函数，不着急立马执行，就成功达到了点击文字和选中高亮效果