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

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
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>
            <el-button type="danger" slot="reference">Delete</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
                when I click the Delete Button , I click the Cancel Button or Sure Button , how to hidden the el-popover
– pssgo
                Apr 9, 2018 at 7:10
                This seems to me like a bug in <el-popover>, it should properly check the defaultPrevented property
– Ferrybig
                Apr 9, 2018 at 7:28
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/[email protected]/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>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
</template>
I hope it helps you, bye.
                I think it's not working example. Because when you click on any delete button all popovers will be opened. For fix this you need to add showDialogs variable, where you will put information about every popover status(open/closed) and set v-model="showDialogs[scope.row.id]".
– Henry
                Feb 3, 2021 at 12:23
                Thanks @ГеннадийПрохоренко I fixed it and I also make the snippet executable, 3 years later :-). Bye.
– Alessandro
                Feb 3, 2021 at 14:09
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>
          </el-popover>
        </template>
  </el-table-column>
</el-table>
<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>
      <el-button size="mini" slot="reference">...</el-button>
    </el-popover>
  </template>
</el-table-column>
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.