예 를 들 어 ztree 는 vue 프로젝트 에서 사용 되 고 검색 기능 이 있 습 니 다.

ztree 는 jQuery 에 의 해 이 루어 진 다기 능'트 리 플러그 인'입 니 다.우수한 성능,유연 한 배치,다양한 기능 의 조합 은 ztree 의 가장 큰 장점 입 니 다.
지난 글vue 에서 ztree 를 어떻게 사용 합 니까?을 소개 하 였 으 니 클릭 하여 보 실 수 있 습 니 다.
앞서 블 로 그 는 vue 에서 클릭 요 소 를 보 여 주 는 방법 과 검색 기능 을 소개 했다.
html

<el-form-item label="  " class="ztree-par">
<i class="icon_org"></i>
<input type="text" placeholder="     " id="ser" v-model="ruleForm.mechanism" @keyup.enter="search_ztree('treeDemo', 'ser')" @click.stop = "control()" class="login-input">
<el-button icon="el-icon-arrow-down" @click.stop="control()"></el-button>
<div class="ztree-z" v-show="ztreeCon">
<ul id="treeDemo" class="ztree"></ul>
</div>
</el-form-item>

main.js 단독 도입 필요

import "./../static/ztree/js/jquery.ztree.exhide-3.5.min.js";

이것 을 단독으로 도입 하지 않 으 면 많은 요 소 를 얻 을 수 없습니다.input 리 턴 이벤트 나 이 벤트 를 클릭 할 때 이 이 벤트 를 직접 실행 하면 됩 니 다.
코드 부분

expand_ztree(treeId) {
  var treeObj = $.fn.zTree.getZTreeObj(treeId);
  treeObj.expandAll(true);
 },
close_ztree(treeId) {
  var treeObj = $.fn.zTree.getZTreeObj(treeId);
  var nodes = treeObj.transformToArray(treeObj.getNodes());
  var nodeLength = nodes.length;
  for (var i = 0; i < nodeLength; i++) {
  if (nodes[i].id == '0') {
   //   ：  
   treeObj.expandNode(nodes[i], true, true, false);
  } else {
   //    ：  
   treeObj.expandNode(nodes[i], false, true, false);
  }
  }
 },
search_ztree(treeId, searchConditionId) {
  this.searchByFlag_ztree(treeId, searchConditionId, "");
 },
searchByFlag_ztree(treeId, searchConditionId, flag) {
  //<1>.    
  var searchCondition = $('#' + searchConditionId).val();
  //<2>.                 
  var highlightNodes = new Array();
  if (searchCondition != "") {
  var treeObj = $.fn.zTree.getZTreeObj(treeId);
  highlightNodes = treeObj.getNodesByParamFuzzy("name", searchCondition, null);
  }
  //<3>.       【    s】
  this.highlightAndExpand_ztree(treeId, highlightNodes, searchCondition, flag);
 },
highlightAndExpand_ztree(treeId, highlightNodes, tx, flag) {
  var treeObj = $.fn.zTree.getZTreeObj(treeId);
  //<1>.              
  var treeNodes = treeObj.transformToArray(treeObj.getNodes());
  for (var i = 0; i < treeNodes.length; i++) {
  treeNodes[i].highlight = false;
  treeObj.updateNode(treeNodes[i]);
  }
  //<2>.   ,             
  this.close_ztree(treeId);
  //<3>.               ，   
  if (highlightNodes != null) {
  for (var i = 0; i < highlightNodes.length; i++) {
   if (flag != null && flag != "") {
   if (highlightNodes[i].flag == flag) {
    //      ，   
    highlightNodes[i].highlight = true;
    treeObj.updateNode(highlightNodes[i]);
    //              ....     ，   
    var parentNode = highlightNodes[i].getParentNode();
    var parentNodes = this.getParentNodes_ztree(treeId, parentNode);
    treeObj.expandNode(parentNodes, true, false, true);
    treeObj.expandNode(parentNode, true, false, true);
   }
   } else {
    treeObj.updateNode(highlightNodes[i]);
   var parentNode = highlightNodes[i].getParentNode();
   var parentNodes = this.getParentNodes_ztree(treeId, parentNode);
   treeObj.expandNode(parentNodes, true, false, true);
   treeObj.expandNode(parentNode, true, false, true);
   }
  }
  }
 },
getParentNodes_ztree(treeId, node) {
  if (node != null) {
  var treeObj = $.fn.zTree.getZTreeObj(treeId);
  var parentNode = node.getParentNode();
  return this.getParentNodes_ztree(treeId, parentNode);
  } else {
  return node;
  }
 }

전시 하 다.

이것 은 작은 bug 가 있 습 니 다.바로 키 보드 를 누 르 거나 들 었 을 때 문제 가 생 길 수 있 습 니 다.https://yq.aliyun.com/articles/308489이 글 은 이 문 제 를 해결 합 니 다.

총결산
위 에서 말 한 것 은 편집장 이 소개 한 ztree 가 vue 프로젝트 에서 사용 하고 검색 기능 을 가지 고 있 습 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!