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，这个文章就解决了这个问题