ElementUI Tree控件在懒加载模式下的重新加载和模糊查询
冢虎 人气:5之所以使用懒加载是为了提高性能,而且只有在懒加载模式下默认会给所有显示节点设置展开按钮。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>
希望能够帮助大家,如果哪些地方有缺陷还请大家指正。
作者:一个想留在杭州发展的撸码青年。
加载全部内容