ElementUI Tree控件在懒加载模式下的重新加载和模糊查询

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

之所以使用懒加载是为了提高性能，而且只有在懒加载模式下默认会给所有显示节点设置展开按钮。leaf也可以做到，但是要操作数据比较麻烦。

要实现懒加载模式下的模糊查询以及重新加载必须要使用data与lazy、load相结合。

lazy和load负责树的初始加载和懒加载，还要绑定node-expand事件加载子节点数据。

data负责模糊查询下填充查询结果树，它与懒加载结合使用并不冲突。

关键code一：

this.$nextTick(() => {
let nodedata = this.node.childNodes[0]
nodedata.expanded = true
nodedata.loadData()
})

作用：在初次设置顶级菜单并想展开二级菜单时候必须用到，在根节点渲染上去后执行展开并加载二级节点。

关键code二：

/**
* @param item 搜索输入内容
*/
treeChange(item) {
//存储搜索输入的值
if (item || item === 0) {
let params = { organizationId: item.organizationId, dimon: this.dimensionModel }
changeTreeData(params).then((res) => {
this.treeData = res.resultData.organizationVos
})
}
},

作用：在搜索控件值改变后触发，查询结果赋值给data达到重新加载tree的目的。

关键code三：

/**
* 重载树
*/
reloadTree() {
this.node.childNodes = []
this.loadNode(this.node, this.resolveFunc)
}

作用：初始化Tree控件数据，node和resolveFunc两个参数需要在load绑定的事件中手动缓存起来方便之后调用。

最后附上源码给大家参考！！！

<template>
<div class="ns-biz-many-type-tree">
<div>
<el-select v-model="value" placeholder="请选择" size="small">
<el-option
v-for="item in treeTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
@change="treeTypeChange"
>
</el-option>
</el-select>
<el-button type="primary" size="small">搜索</el-button>
</div> <el-autocomplete
v-model="treeSearchInput"
:fetch-suggestions="remoteSearch"
value-key="organizationName"
placeholder="请输入内容"
size="small"
@select="treeChange"
>
<i class="el-icon-search el-input__icon" slot="suffix" @click="handleIconClick"> </i
></el-autocomplete> <el-tree
ref="newTree"
:props="defaultProps"
:data="treeData"
lazy
:load="loadNode"
@check-change="handleCheckChange"
@node-expand="expandNode"
>
</el-tree>
</div>
</template>
<script>
import {
getOrgTreeData,
getOrgTreeChildData,
getSearchData,
changeTreeData,
} from './service/NS-biz-organize-tree'
export default {
name: 'Ns-biz-many-type-tree',
props: {},
data() {
return {
treeData: [],
treeTypeOptions: [
{
value: '1',
label: '组织架构',
labelName: 'organizationName',
childrenName: 'childOrganizations',
},
{
value: '2',
label: '工作组',
labelName: 'groupName',
childrenName: 'childGroup',
},
],
defaultProps: {
label: 'organizationName',
children: 'childOrganizations',
},
node: {},
treeSearchInput: '',
value: '1',
topMenuName: '',
dimensionModel: 'adm',
resolveFunc: function () {},
}
},
mounted() { },
methods: {
// 树节点点击事件
handleCheckChange() {},
// 树类型切换事件
treeTypeChange() {},
//快捷图标搜索
handleIconClick() {},
querySearchAsync() {},
// 加载Tree节点
loadNode(node, resolve) {
console.log('树对象', node)
if (node.level === 0) {
this.node = node
this.resolveFunc = resolve
// 组织架构树
if (this.value == '1') {
getOrgTreeData({ dimon: this.dimensionModel, selectAll: false }).then((res) => {
let { organizationVos } = res.resultData
this.$nextTick(() => {
let nodedata = this.node.childNodes[0]
nodedata.expanded = true
nodedata.loadData()
})
return resolve([
{
organizationName: organizationVos[0].organizationName,
organizationId: organizationVos[0].organizationId,
},
])
})
} else {
}
} else {
setTimeout(() => {
getOrgTreeChildData({
id: node.data.organizationId,
dimon: this.dimensionModel,
selectAll: false,
}).then((res) => {
resolve(res.resultData.organizationVos)
})
}, 500)
}
},
// 节点展开事件
expandNode(obj, node, self) {
if (node.level !== 0) {
console.log('node', node)
if (node.data.childOrganizations == null) {
if (this.value == '1') {
getOrgTreeChildData({
id: node.data.organizationId,
dimon: this.dimensionModel,
selectAll: false,
}).then((res) => {
node.data.childOrganizations = res.resultData.organizationVos
})
} else {
}
}
}
},
/**
* 树输入触发搜索查询
* @param query
* @param cb
*/
remoteSearch(query, cb) {
if (query !== '') {
let params = { organizationName: query, dimon: this.dimensionModel }
getSearchData(params)
.then((r) => {
cb(r.resultData)
})
.catch((err) => {
console.log(err)
})
} else {
cb([])
}
},
/**
* @param item 搜索输入内容
*/
treeChange(item) {
// 存储搜索输入的值
if (item || item === 0) {
let params = { organizationId: item.organizationId, dimon: this.dimensionModel }
changeTreeData(params).then((res) => {
this.treeData = res.resultData.organizationVos
})
}
},
/**
* 重载树
*/
reloadTree() {
this.node.childNodes = []
this.loadNode(this.node, this.resolveFunc)
},
},
watch: {
value(val) {
this.reloadTree()
},
treeSearchInput(val) {
if (val == '') {
this.reloadTree()
}
},
},
}
</script>
<style lang="less" scoped></style>