Vue中多popover点击子组件取消按钮没有
修改前Bug代码Bug问题解决方法修改后代码参考文章
修改前Bug代码
<el
-table
-column label
="操作2" width
="200px" align
="center">
<template slot
-scope
="scope">
<edit v
-if="checkPermission(['ADMIN'])" :data
="scope.row" :sup_this
="sup_this"/>
<el
-popover
v
-if="checkPermission(['ADMIN'])"
:ref
="scope.row.id"
placement
="top"
width
="180">
<p
>确定删除吗？
</p
>
<div style
="text-align: right; margin: 0">
<el
-button size
="mini" type
="text" @click
="$refs[scope.row.id].doClose()">取消
</el
-button
>
<el
-button
:loading
="delLoading" type
="primary" size
="mini" @click
="subDelete(scope.row.id)">确定
</el
-button
>
</div
>
<el
-button slot
="reference" type
="danger" size
="mini">删除
</el
-button
>
</el
-popover
>
</template
>
</el
-table
-column
>
<el
-table
-column label
="重置设备" width
="100px" align
="center">
<template slot
-scope
="scope">
<el
-popover
v
-if="checkPermission(['ADMIN'])"
:ref
="scope.row.id"
placement
="top"
width
="180">
<p
>确定重置吗？
</p
>
<div style
="text-align: right; margin: 0">
<el
-button size
="mini" type
="text" @click
="$refs[scope.row.id].doClose()">取消
</el
-button
>
<el
-button
:loading
="delLoading" type
="primary" size
="mini" @click
="subRetting(scope.row.id)">确定
</el
-button
>
</div
>
<el
-button slot
="reference" type
="danger" size
="mini">重置
</el
-button
>
</el
-popover
>
</template
>
</el
-table
-column
>
Bug问题
官方文档中的popover只是针对的单个的情况，像table这种循环渲染popover的情况如果照搬会死的惨绝人寰，第一个“确定删除吗？”标签的取消按钮没用 弹出框出来后点击取消按钮不管用。官方介绍的方法只适用于有一个popover组件的情况下
解决方法
搭配el-popover的内置方法 doClose 通过引用popover对象然后调用doClose方法
修改后代码
由于问题是两个消息提示窗的:ref是重复的，因此，我将第一个提示窗的:ref属性改为了scope.row.id-1，方法有点野，不知道以后会不会出Bug。
参考文章
原理理解
