截止到element2.4.11版本,关于popover在表格中的显示的bug仍然还没修复,表现为,如果在表格终的某个单元格里嵌套一个popover弹窗,点击某一个单元格中的button出发弹窗显示的时候,每一行的popover都会显示
但是这样也不是没有解决办法
方法一
<el-popover style="display:inline-block;margin-left:2px;"
ref="popover"
trigger="click"
placement="top"
width="160"
v-model="scope.row.deleteEventDialog">
<p style="font-size:14px;padding: 6px 0;">确定删除吗?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" @click="scope.row.deleteEventDialog = false">取消</el-button>
<el-button type="primary" size="mini" :loading="submiting" @click="deleteEventById($event, scope.row)">确定</el-button>
</div>
<div slot="reference">
<el-button
size="mini"
type="danger"
plain
@click.stop.prevent="scope.row.deleteEventDialog = true">
删除
</el-button>
</div>
</el-popover>
在data中定义deleteEventDialog
变量,通过操作这个变量来控制popover的显隐,但有时候会有bug,原因不详。
方法二
<el-popover placement="top" width="160" :ref="`popover-${scope.$index}`">
<p>确定要删除吗?</p>
<div>
<el-button size="mini" @click="scope._self.$refs[`popover-${scope.$index}`].doClose()">取消</el-button>
<el-button type="primary" size="mini" @click="handleDelete(scope.row, scope.$index)">确定</el-button>
</div>
<el-button slot="reference" size="mini" type="danger">删除</el-button>
</el-popover>
这样就不用新定义一个变量,而是给popover一个refpopover-${scope.$index}
关闭操作通过
@click="scope._self.$refs[`popover-${scope.$index}`].doClose()"
在方法中关闭的时候这样写
@click="handleDelete(scope.row, scope.$index)"
handleDelete (row, index) {
Api.getdeleteShow(row.id)
.then(data => {
if (data.status === 0) {
this.$refs[`popover-${index}`].doClose()
this.$message({
type: 'success',
message: '删除成功'
})
} else {
this.$message({
type: 'warning',
message: '获取数据失败'
})
}
})
.catch(res => {
this.$message({
type: 'error',
message: '获取数据失败'
})
})
this.findByPage()
}
传入index,用index关闭,这种方法来自githuber们的贡献,我只是摘录,原理我还不详。但是这种方法出现bug的几率比较小,亲测可用。