模拟搜索变色查询

 <section class="search-area" v-if="selectOption.length > 1" ref="scrollTree">
          <h-select v-model="selectedValue" style="margin: 0px 6px; width:90%; margin-bottom: 10px;" >
            <h-option v-for="opt in selectOption"
              :key="opt.value"
              :value="opt.value"
              :label="opt.name"
            >
            </h-option>
          </h-select>
        </section> 
<h-tree ref="tree" :data="treeRoot" class="root-name-node"
                  accordion
                  :value-key="typeConfig.treeIdField"
                  :labelKey="typeConfig.treeNameField"
                  :parent-key="typeConfig.parentID"
                  @node-click="handleNodeClick"
                  :render-content="renderContent"
                  :filter-node-method="filterNode"
                  :defaultExpandRoot="type === 'org'"
                  :node-key="typeConfig.idField"
                  :default-expanded-keys="defaultExpandedKeys"
                  />

search(type) {
      if(this.currentFilterWord){
        this.getFontClass(this.currentFilterWord, true)
        let data = this.getFilter(this.oldList, this.currentFilterWord, this.selectedValue)
        if (type === 'new') {
          this.index = 0
        } else if (type === 'up') {
          this.index = this.index-- > 0 ? this.index-- : data.length-1;
        } else {
          this.index = this.index++ < data.length-1 ? this.index++ : 0;
        }
        this.$nextTick(() => {
          if(data.length) {
            this.currentNodeKey = data[this.index][this.typeConfig.idField];
            let clssName = document.getElementsByClassName(this.currentNodeKey)
            this.$refs.tree.setCheckedKeys([]);
            this.$refs.tree.setCurrentKey(this.currentNodeKey);
            this.currentNode = this.$refs.tree.getCurrentNode() || this.currentNode;
            // this.$refs.scrollTree.scrollIntoView({
            //    behavior: "smooth",  // 平滑过渡
            //   block:    "start"  // 上边框与视窗顶部平齐。默认值
            // })
            if(clssName.length){
              let offsetTop = clssName[0].offsetTop
              console.log(offsetTop, 'clssName', data[this.index])
              // console.log(offsetTop, clssName[0].scrollTop)
              // clssName[0].offsetTop = 10;
              // clssName[0].scroll(0, offsetTop)
              document.getElementsByClassName('tree-node-wrapper')[0].scrollTo(0, offsetTop)
              //  document.getElementsByClassName('tree-node-wrapper')[0].scrollIntoView(
              //   {
              //       behavior: "smooth",  // 平滑过渡
              //   block:    "start"  // 上边框与视窗顶部平齐。默认值
              //   }
              // )
            }
            // console.log(clssName, 'clssName')
           
          }
            //
        });
      } else {
        this.getFontClass(this.currentFilterWord, false)
         this.$nextTick(() => {
          if (this.type === 'org') this.currentNodeKey = this.treeRoot.find(item => item[this.typeConfig.parentID] === '0' || !item[this.typeConfig.parentID])[this.typeConfig.idField];
          this.$refs.tree.setCurrentKey(this.currentNodeKey);
          this.currentNode = this.$refs.tree.getCurrentNode() || this.currentNode;
        });
      }


    },
    getFontClass(keywords, type){
      let list = document.getElementsByClassName('font-class')
      if(list.length){
        for(let i of list){
          if(type == true){
            let str = i.innerText
            let reg = new RegExp(""+keywords+"","g");
            let result = str.replace(reg,"<span style='background:yellow;font-weight:700;' class='font-style'>"+keywords+"</span>");
            i.innerHTML = result;
          }else{
            i.innerHTML = i.innerText;
          }
          
        }
      }
      
    },
// 过滤结果
    getFilter(arr, keyword, type) {
      let data = [];
      arr.forEach(item => {
        if (item.sourceType == type && item.trdOrgName.match(keyword) !==null) {
          data.push(item)
        }
      })
      return data;
    },
// 自定义渲染节点样式 【红色/加粗】
    renderContent(h, { node, data, store }) {
      // console.log(node.key,'ceshi')
      return (
        <span class={['custom-tree-node', !Number(data[this.typeConfig.wi_ID]) && data[this.typeConfig.idField] !== '0' ? 'noMapping' : '',
        data.allMapped ? 'allChildrenMapped' : '', data.hasModified ? 'hasModified' : ''], node.key}>
          <span class="font-class">{node.label}</span>
        </span>
      )
    },