[Solved] When using Popconfirm or Popover in the vue element-ui form, the delete button does not display the problem

background

element-ui has a delete button in the table, and I want to bind a delete confirmation effect to the delete button, similar to this:

the delete button is not displayed in actual use, the code is as follows:

<template slot-scope="scope">
	<el-popconfirm title="您确定删除吗？" @onConfirm="cancelOrder(scope.row.id)">
	    <el-button >删除</el-button>
	</el-popconfirm>
</template>

solution

After some Baidu exploration, a solution was found:

<template slot-scope="scope">
	<el-popconfirm title="您确定删除吗？" @onConfirm="cancelOrder(scope.row.id)">
	    <el-button slot="reference">删除</el-button>
	</el-popconfirm>
</template>

Add one to the delete button, and the button in the slot="reference"table can be displayed. I don't know what the principle is, but it works well anyway.

Or use another delete confirmation popup:

<el-popover
        placement="top"
        width="200"
        v-model="scope.row.visible">
    <p>确定删除吗？</p>
    <div style="text-align: right; margin: 0">
        <el-button type="text" @click="scope.row.visible= false">取消</el-button>
        <el-button type="text" @click="delete(scope.row.id)">确定</el-button>
    </div>
    <el-button slot="reference">删除</el-button>
</el-popover>

I prefer the first type of el-popconfirmpop-up window because it is simple and convenient.

-end-