el-tree懒加载的情况下,搜索树节点搜到的数据不会默认展开,要展开的话需要切换回非懒加载。
以下为HTML代码:
<div style="height: 96%"> <el-input placeholder="搜索组织名称" v-model="filterText" @keyup.enter.native="searchData" @click="searchData" :clear-icon-click="clearSearch" clearable suffix-icon="h-icon-search" ></el-input> <el-tree style="margin-top: 5px" ref="treeData" :data="treeData" :props="defaultProps" simple-data node-key="orgIndexCode" parent-key="parentOrgIndexCode" :current-node-key="currentNode.orgIndexCode" @current-change="handleCurrentChange" :default-expanded-keys="expandNodes" show-icon lazy :load="loadNode" > </el-tree> </div>
以下为异步加载树节点的代码:
async loadNode (node, resolve) { if (!node.data.id) { resolve([]) } // 一级节点处理 if (node.level === 0) { this.node_had = node this.resolve_had = resolve await this.requestTree(resolve); } // 其余节点处理 if (node.level >= 1) { this.getIndex(node.data, resolve); } }, // 异步加载叶子节点数据函数 async getIndex(data, resolve) { let obj = {} obj.parentOrgIndexCode = data.orgIndexCode await this.requestData(obj); resolve(this.resData); }, // 首次加载一级节点数据函数 async requestTree(resolve) { const resRoot = await getRoot() if (resRoot) { this.resData = [] this.resData.push(resRoot) this.currentNode = this.resData[0] resolve(this.resData) this.$emit('getTable', this.currentNode) } }, // 获取该节点下的子节点 async requestData(obj) { const res = await getRootNextData(obj); const resDatas = res; this.resData = resDatas; }
以下为搜索函数代码:
async searchData () { this.$refs.treeData.$data.store.lazy = !this.filterText//搜索内容filterText不为空的话,懒加载模式为false if (this.filterText) { let obj = {} obj.orgName = this.filterText const res = await getOrgTreeByName(obj)//调用后台搜索接口 if (res.length) { this.treeData = res // 默认展开节点 for (let i in this.treeData) { this.expandNodes.push(this.treeData[i].orgIndexCode) } } else { this.treeData = [] } } else { this.treeData = [] this.expandNodes = ['root000000'] this.loadNode(this.node_had,this.resolve_had) } }