树形穿梭框el-tree-transfer(Vue el-tree与el-transfer的结合) --- 解决搜索时子节点和父节点不同步问题
问题描述在穿梭框中搜索父节点时,其下的子节点不能被一起搜索到,但是搜索子节点时,其上的父节点会被搜索到。解决代码先上代码:/** @fun:自定义搜索逻辑* @params:query输入的要检索的关键字,item当前遍历的节点* 作用:会将树从上往下(包括父子节点)进行顺序遍历* */filterMethod(query, item) {// 判断是不是第一次查询,是的话,将首节点赋值//fir
·
问题描述
在穿梭框中搜索父节点时,其下的子节点不能被一起搜索到,但是搜索子节点时,其上的父节点会被搜索到。
解决代码
先上代码:
/*
* @fun:自定义搜索逻辑
* @params:query输入的要检索的关键字,item当前遍历的节点
* 作用:会将树从上往下(包括父子节点)进行顺序遍历
* */
filterMethod(query, item) {
// 判断是不是第一次查询,是的话,将首节点赋值
//firstKey:缓存首节点key值,为了避免二次搜索时上一次的检索条件还在
if (!this.firstKey) {
this.firstKey = item.key
}
// 如果缓存的首节点与目前循环的值相同,说明是一次新的循环
//pidKeySet:缓存符合条件的节点key值
if (this.firstKey === item.key) {
this.pidKeySet = [];
}
// 如果含有搜索值则存入pidKeySet
if (item.title.indexOf(query) > -1) {
this.pidKeySet.push(item.key);
return true;
}
// 如果搜索到的数据中含有子节点则将其一并显示
if (this.pidKeySet.find(v => v === item.pid)) {
return true;
}
// 搜索不到
return false;
},
此插件安装及使用地址:el-tree-transfer
更多推荐
已为社区贡献12条内容
所有评论(0)