vue use elementUI <el-popover> in table - vue.js

Question

I've a button that opens a Popover element. In the dialog I've two buttons: Cancel and Sure, when I click on one of these I want to close the dialog.
How can I do that?
This is my code:
var vm = new Vue({
el:'#app',
data:function(){
return {
data:[
{
id:1,
name: 'jak',
age: 24
},
{
id:2,
name: 'irol',
age: 34
}
]
}
},
methods:{
edit(){},
remove(){
// how can i cancel the el-popover
},
otherClick(){
}
}
})
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.3.2/index.js"></script>
<div id="app">
<el-table :data="data" style="width:100%" border>
<el-table-column prop="id" label="id" ></el-table-column>
<el-table-column prop="name" label="Name" ></el-table-column>
<el-table-column prop="age" label="Age" ></el-table-column>
<el-table-column label="Action">
<template slot-scope="scope">
<el-button type="primary" class="mr-20" #click="edit(scope)">Edit</el-button>
<el-popover placement="top" trigger="click" title="Sure？">
<div class="btn-confirm">
<el-button type="text" size="mini" #click="otherClick">Cancel</el-button>
<el-button type="primary" size="mini" #click="remove(scope)">Sure</el-button>
</div>
<el-button type="danger" slot="reference">Delete</el-button>
</el-popover>
</template>
</el-table-column>
</el-table>
</div>

Answer 1

You have to define a property to show/hide the dialog in the data attribute:
data:[
{
id:1,
name: 'jak',
age: 24,
showDialog: false
},
Then add the v-model property to the el-popover:
And finally define the action on Cancel/Sure button, for the 'Cancel' you could simply set the property to false:
<el-button type="text" size="mini" #click="scope.row.showDialog=false">Cancel
For the 'Sure', since you have to add more code, you can set the property in the click method:
remove(row){
//DO THE REMOVE ACTION!
row.showDialog=false;
}
Please take a look to the complete example:
var vm = new Vue({
el:'#app',
data:function(){
return {
data:[
{
id:1,
name: 'jak',
age: 24,
showDialog: false
},
{
id:2,
name: 'irol',
age: 34,
showDialog: false
}
]
}
},
methods:{
edit(){},
remove(row){
//DO THE REMOVE ACTION!
row.showDialog = false;
}
}
})
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui#2.4.7/lib/index.js"></script>
<div id="app">
<template>
<el-table :data="data" style="width:100%" border>
<el-table-column prop="id" label="id" ></el-table-column>
<el-table-column prop="name" label="Name" ></el-table-column>
<el-table-column prop="age" label="Age" ></el-table-column>
<el-table-column label="Action">
<template slot-scope="scope">
<el-button type="primary" #click="edit(scope)">Edit</el-button><br/>
<el-button type="danger" slot="reference" #click="scope.row.showDialog=true">Delete</el-button>
<el-popover trigger="click" title="Sure？" v-model="scope.row.showDialog">
<div class="btn-confirm">
<el-button type="text" size="mini" #click="scope.row.showDialog=false">Cancel</el-button>
<el-button type="primary" size="mini" #click="remove(scope.row)">Sure</el-button>
</div>
</el-popover>
</template>
</el-table-column>
</el-table>
</template>
</div>
I hope it helps you, bye.

Answer 2

This dose not work if you have more than 2 records, e.g., using below data:
data:[
{
id:1,
name: 'jak',
age: 24
},
{
id:3,
name: 'irol',
age: 34
},
{
id:2,
name: 'irol1',
age: 34
}
{
id:4,
name: 'irol2',
age: 35
},
]
3 delete confirm dialog will show at the same time.

Answer 3

several hours later and a little of code diggin I finally found the way.
Use ':ref'
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.3.2/index.js"></script>
<div id="app">
<el-table :data="data" style="width:100%" border>
<el-table-column prop="id" label="id" ></el-table-column>
<el-table-column prop="name" label="Name" ></el-table-column>
<el-table-column prop="age" label="Age" ></el-table-column>
<el-table-column label="Action">
<template slot-scope="scope">
<el-button type="primary" #click="edit(scope)">Edit</el-button><br/>
<el-button type="danger" slot="reference" #click="showDialog=true">Delete</el-button>
<el-popover trigger="click" :ref="'popover'+scope.$index">
<div class="btn-confirm">
<el-button type="text" size="mini" #click="remove(scope.$index)">Cancel</el-button>
<el-button type="primary" size="mini" #click="remove(scope)">Sure</el-button>
</div>
</el-popover>
</template>
</el-table-column>
</el-table>
var vm = new Vue({
el:'#app',
data:function(){
return {
showDialog: false,
data:[
{
id:1,
name: 'jak',
age: 24
},
{
id:2,
name: 'irol',
age: 34
}
]
}
},
methods:{
edit(){},
remove(popRef){
//DO THE REMOVE ACTION!
var child = this.$refs[popRef].doClose();
}
}
})

Answer 4

<el-table :data="rows">
<el-table-column prop="name" label="Name" ></el-table-column>
<el-table-column fixed="right" label="Operations">
<template slot-scope="scope">
<el-popover placement="right" trigger="click">
<ul class="table-popover-list">
<li>Copy</li>
<li>Edit</li>
<li>Remove</li>
</ul>
<el-button size="mini" slot="reference">...</el-button>
</el-popover>
</template>
</el-table-column>