背景介绍:外派到泰康做项目。这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件。
但是后来发现他们的公司组织结构不是都请求的同一个接口,于是想着组件里面给加个url参数就可以了。但是他们的人员说一些参数数据都不同,
非要我在请求接口时在每个页面的父组件分别调用。我想着你们不觉得麻烦我也OK啦。然后就遇到了需要在父组件调用子组件方法的问题。
tree组件有个load 方法,我们要做的是在父组件能调用这个方法,并将他的默认参数node和resolve传过去
<el-tree
v-show="isShowTree"
class="bgClFFF treeBox"
ref="selectTree"
:data="treeData"
node-key="label"
accordion
:props="defaultProps"
@node-click="handleNodeClick"
:expand-on-click-node="false"
lazy
:load="loadNodeChild"
:render-content="renderContent"
></el-tree>
解决的方法如下:
子组件props里定义一个方法,用于接受父组件传过来的方法
props: {
loadNode: {
type: Function,
default: ""
},
}
methods里子组件触发加载数据方法时,调用父组件的方法,并将参数传过去
loadNodeChild(node, resolve) {
this.loadNode(node, resolve);
},
// 父组件调用
<Tree
@chooseNewNode = "getTreeNode"
:treeData="treeData"
:loadNode = "loadNode"
>
</Tree>
然后在父组件的methods里调用这个方法
loadNode(node, resolve){
if (this.isFirstLoad) {
// 第一次加载的数据
resolve(this.treeData);
this.isFirstLoad = false;
} else {
// 根据node的id发送请求,resolve(后端返回的data数组)
if (node.data.id == "50000075O") {
resolve(this.loadData);
} else {
resolve([]);
}
}
}