直接使用 popover 弹出框的时候,是没有任何问题的,但是在 el-table 中使用 popover 弹出框就会出现,点击取消按钮, popover 框不会隐藏,即使使用 v-model 绑定值,也是不管用的
解决方法如下
1.在 el-popover 中添加属性:
:ref="`popover-${scope.$index}`"
2.取消按钮添加点击事件,添加 scope 参数
<el-table-column
label="操作">
<template slot-scope="scope">
<el-popover
placement="top"
:ref="`popover-${scope.$index}`">
<p>是否已经回访完毕?</p>
<div style="text-align: right; margin: 0">
<el-button
size="mini"
type="text"
@click="cancelBtn(scope)">
取消
</el-button>
</div>
<el-button slot="reference">回访</el-button>
</el-popover>
</template>
</el-table-column>
3. methods 方法中调用 doClose() :
scope._self.$refs[`popover-${scope.$index}`].doClose()
具体如下:
cancelBtn (scope) {
scope._self.$refs[`popover-${scope.$index}`].doClose()
}