element-ui中tree樹形組件 通過搜索定位到對應的樹節點,並展示在可見區

通過輸入樹節點名稱定位到對應的樹節點上，並顯示在可見區域

<el-tree
      ref="tree"
      v-loading="treeLoading"
      :data="treeData"
      :props="treeProps"
      node-key="id"
      :expand-on-click-node="false"
      :highlight-current="true"
      :filter-node-method="filterNode"
      :default-expanded-keys="expandedKeys"
      :render-after-expand="false"
      @node-click="handleNodeClick">
         <span
            slot-scope="{ node, data }"
            class="custom-tree-node"
          >
            <span :id="data.id">{{ node.label }}</span> // 通過自定義節點，給每個節點一個id
          </span>
        </el-tree>

在選中對應的名稱是定位到樹節點上

selectedRegion(item) {
      if (Object.keys(item).length === 0) {
        return
      }
      this.expandedKeys.push(item.parentId)
      this.$refs.tree.setCurrentKey(item.regionId)       //通過 key 設置某個節點的當前選中狀態，使用此方法必須設置 node-key 屬性
      const node = document.getElementById(item.regionId) // 通過Id獲取到對應的dom元素
      setTimeout(() => {
        if (node) {
          this.$nextTick(() => {
            node.scrollIntoView({ block: 'center' }) // 通過scrollIntoView方法將對應的dom元素定位到可見區域 【block: 'center'】這個屬性是在垂直方向居中顯示
         })
        }
      }, 100)

下面的內容來自 https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView 有興趣的可以看看
Element 接口的scrollIntoView()方法會滾動元素的父容器，使被調用scrollIntoView()的元素對用戶可見

element.scrollIntoView(); // 等同於element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型參數
element.scrollIntoView(scrollIntoViewOptions); // Object型參數

alignToTop可選
一個Boolean值：
如果為true，元素的頂端將和其所在滾動區的可視區域的頂端對齊。相應的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。這是這個參數的默認值。
如果為false，元素的底端將和其所在滾動區的可視區域的底端對齊。相應的scrollIntoViewOptions: {block: "end", inline: "nearest"}。

scrollIntoViewOptions 可選
一個包含下列屬性的對象：
behavior 可選
定義動畫過渡效果， "auto"或 "smooth" 之一。默認為 "auto"。
block 可選
定義垂直方向的對齊， "start", "center", "end", 或 "nearest"之一。默認為 "start"。
inline 可選
定義水平方向的對齊， "start", "center", "end", 或 "nearest"之一。默認為 "nearest"。