el-tree 节点动态查找

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); };