共计 3103 个字符，预计需要花费 8 分钟才能阅读完成。
1. 效果图通过在 input 框里输入值，动态查询树节点。将父节点展开，找到的节点显示在最当前窗口。
2. 代码
2.1 html
<template>
<div style=”height: 100%; “>
<div style=”height: 45px;padding-top:8px;padding-bottom:8px;”>
<el-label> 快速查询 :</el-label>
<el-input
style=” width: calc(100% – 210px);height: 28px !important;line-height: 28px !important;”
placeholder=” 请查找输入内容 ”
v-model=”searchInput”
@keyup.native=”search”>// 按键结束就触发，下面的查找按钮其实可以删除
</el-input>
<el-button size=”mini” type=”primary” @click.native=”search”> 查找 </el-button>
<el-button size=”mini” type=”” @click.native=”next” style=”margin-top: 0px”> 下一个 </el-button>
</div>
<div
id=”searchtree-eletree” //id 便于定位
style=”height: calc(100% – 46px); overflow: auto;” class=”border-grey”>
<el-tree :data=”searchTreeDT”
node-key=”id”
ref=”tree”
:highlight-current=”true”
expand-on-click-node
:props=”defaultProps”
:default-expanded-keys=”defaultEexpandedkeys” // 展开节点
>
</el-tree>
</div>
</div>
</template>
2.2 js
<script>
export default {
data() {
return {
// 树
searchTreeData:[],
defaultEexpandedkeys: [0], // 默认展开一级树节点
defaultProps: {
children: ‘children’,
label: ‘name’
},
// 查询栏
searchInput: ”,
searchIndex: null,
searchData: [],
};
},
watch: {
// 搜索框中内容变化，重置当前搜索结果的索引值
searchInput: function () {
this.searchIndex = null
},
},
methods: {
// 查询
search() {
this.searchIndex = null;
if (this.searchInput) {
let searchInput = this.searchInput;
this.searchData = this.searchTreeData.filter(function(item) {
return item.name.indexOf(searchInput) > -1 // 返回符合查询条件的节点
});
if (this.searchData.length) {// 存在符合查询条件的节点
this.searchIndex = 0;
// 展开符合条件节点的父节点（使查询节点显示出来）
this.defaultEexpandedkeys = getParentsId(this.searchData[0], this.searchTreeData, ‘id’,’pId’, 0);
this.$nextTick(() => {// 显示完成后执行
this.$refs.tree.setCurrentKey(this.searchData[0].id);// 高亮查询到的第一个节点
setTimeout(() => {
// 根据树 id 找到高亮的节
let node = document.querySelector(‘#searchtree-eletree .is-current’); 点
if (node) {
setTimeout(() => {
// node.scrollIntoView(); // 有 bug，可尝试
let top = $(node).position().top;
// 关键代码，将选中节点显示在当前窗口可视区域
$(“#searchtree-eletree”).scrollTop(top);
}, 500);
}
}, 0);
});
} else {
//Message 需要引入 import {Message} from ‘element-ui’
Message.info(‘ 未找到任何匹配数据！’);
}
} else {
Message.info(‘ 请输入要查找的内容！’);
}
},
next(){
if (this.searchIndex !== null) {
this.searchIndex += 1;
this.searchIndex = this.searchIndex < this.searchData.length ? this.searchIndex : 0;
this.defaultEexpandedkeys = getParentsId(this.searchData[this.searchIndex], this.searchTreeData, ‘id’,’pId’, 0);
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.searchData[this.searchIndex].id);
setTimeout(() => {
let node = document.querySelector(‘#searchtree-eletree .is-current’);
if (node) {
setTimeout(() => {
// node.scrollIntoView();
let top = $(node).position().top;
$(“#searchtree-eletree”).scrollTop(top);
}, 500);
}
}, 0);
});
} else {
if (this.searchInput) {
this.search();
} else {
Message.info(‘ 请输入要查找的内容！’);
}
}
},
}
}
</script>
2.3 在 2.2 用到的获取父节点 id 的方法
/**
* 找到当前节点的所有祖先节点的 idKey
* @param {Object} node 当前节点信息
* @param {Array} data 所有节点的数据信息
* @returns {Array} parentsId 祖先节点的 idKey
*/
export function getParentsId(node, data = [], idKey=’id’, pIdKey=’pid’, rootId = ‘0’, parentsId = []){
if(!node) return [rootId, …parentsId];
if(node[pIdKey] == rootId) return [node[pIdKey], …parentsId];
let pNode = data.filter(item => item[idKey] == node[pIdKey]);
if(!pNode.length) return parentsId;
parentsId.push(pNode[0][idKey]);
return getParentsId(pNode[0], data, idKey, pIdKey, rootId, parentsId);
};
