ztree在vue项目中使用并且带有搜索功能

之前博客介绍过怎么在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;

      }

    }

展示

这没有高亮显示的功能，如果需要高亮显示可以查看原文

原文链接：https://www.jianshu.com/p/edcffa22d2cd

这个有个小小的bug，就是做键盘按下或者抬起的时候会有问题，https://yq.aliyun.com/articles/308489，这个文章就解决了这个问题