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)
}
}
本文探讨了在使用el-tree组件进行懒加载时遇到的问题,即搜索到的树节点不会默认展开,需切换至非懒加载模式。文章提供了HTML代码示例及异步加载、搜索函数的实现细节。
2532

被折叠的 条评论
为什么被折叠?



