1

我有一个打开Popover元素的按钮。在对话框中，我有两个按钮：Cancel并且Sure，当我单击其中一个按钮时，我想关闭对话框。我怎样才能做到这一点？

这是我的代码：

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>

4

4 回答 4

1

  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 },

  2. Then add the v-model property to the el-popover:

  3. 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.

于 2018-04-13T15:54:20.563 回答
0

如果您有超过 2 条记录，则此方法不起作用，例如，使用以下数据：

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 删除确认对话框将同时显示。

于 2018-05-20T14:50:55.453 回答
0 
<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>

于 2019-02-12T07:33:26.403 回答
0

几个小时后，我终于找到了方法。使用 ':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();
    }
  }
})
于 2018-11-08T22:06:39.150 回答