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)