【vue】解决element ui中el-table中使用Popconfirm或Popover无法显示按钮或无法弹出确认框的问题

前言

在使用element ui table时，每一行有一个删除按钮，想要的效果是当点击删除按钮时，先弹出删除确认框，用户点击确认后才进行删除操作，但是在测试过程中发现了如下两个问题：

1、删除按钮不显示（element-ui table中使用Popconfirm或者Popover弹窗时）

2、按钮显示后，点击按钮无法弹出提示框

解决方案 

1、删除按钮不显示

问题描述：在element-ui table中使用Popconfirm或者Popover时，Popconfirm或Popover中的el-button不显示，如下图

解决方案：在el-button中添加slot="reference"即可

Slot

参数	说明
reference	触发 Popconfirm 显示的 HTML 元素

效果如下：

2、无法弹出提示框

问题描述：在element-ui table中使用Popconfirm或者Popover时，点击Popconfirm或Popover中的el-button无法弹出确认框

解决方案：在el-popconfirm组件中添加 :ref="`popover-${scope.$index}`"即可（指定唯一的ref）

效果如下：