【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 元素

<template slot-scope="scope">
                  <el-popconfirm
                    confirm-button-text="确认"
                    cancel-button-text="取消"
                    icon="el-icon-info"
                    icon-color="red"
                    title="确认要删除该条记录？"
                    @onConfirm="deleteitem(scope.row)"
                  >
                    <el-button type="text" slot="reference">
                      <i class="el-icon-delete" />
                    </el-button>
                  </el-popconfirm>
                </template>

效果如下：

2、无法弹出提示框

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

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

 <template slot-scope="scope">
                  <el-popconfirm
                    confirm-button-text="确认"
                    cancel-button-text="取消"
                    icon="el-icon-info"
                    icon-color="red"
                    title="确认要删除该条记录？"
                    @onConfirm="deleteitem(scope.row)"
                     :ref="`popover-${scope.$index}`"
                  >
                    <el-button type="text" slot="reference">
                      <i class="el-icon-delete" />
                    </el-button>
                  </el-popconfirm>
                </template>

效果如下：