ElementUI(饿了么)中el-popover弹出框手动关闭(循环中)
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
ElementUI(饿了么)中el-popover弹出框⼿动关闭(循环中)Element UI (饿了么)中 el-popover ⼿动关闭
el-popover弹出框关闭和打开分别⽤ doClose() 和 doShow() ⽅法
Element UI⽂档中没有提到这两个⽅法
⼀般情况下:
<el-popover ref="popoverRef" placement="top" width="350">
<p class="font-size-18 fontWeight-600 m-b-20">排序权重</p>
<div>
<span>XXX</span>
</div>
<div style="text-align: right; margin: 0">
<el-button type="text" size="mini" @click="determinePopover(XXX)">确定</el-button>
</div>
<el-button @click="set_popoverVisible(XXX)" type="text" slot="reference">权重</el-button>
</el-popover>
点击确定的时候调⽤关闭的事件:
this.$refs.popoverRef.doClose() //关闭的
//this.$refs.popoverRef.doShow() //打开的
如果是在循环中或表格中
ref="popoverRef"同名的就会⽣成很多个要确定唯⼀才能关闭
<el-table-column label="操作" fixed="right">
<template slot-scope="scope">
<el-button type="text" @click="toEditDataPage(scope.row.id)">编辑</el-button>
<el-popover :ref="'popoverRef_' + scope.row.id" placement="top" width="350">
<span>XXX</span>
<div style="text-align: right; margin: 0">
<el-button type="text" size="mini" @click="determinePopover(scope.row.id)">确定</el-button>
</div>
<el-button @click="set_popoverVisible(scope.row.XXX)" type="text" slot="reference">权重</el-button>
</el-popover>
</template>
</el-table-column>
确定唯⼀: :ref="'popoverRef_' + scope.row.id" 或者取第⼏个也⾏
点击确定的时候调⽤关闭的事件:
setTimeout(() => {
if (this.$refs && this.$refs['popoverRef_' + id]) {
//重点是以下两句
this.$refs['popoverRef_' + id].doClose() //关闭的
this.$refs['popoverRef_' + id].doShow() //打开的
//重点是以上两句
}
}, 0)。