Question

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

这是我的代码：

＆＃13;

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(){
    
    }
  }
})

＆＃13;

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

＆＃13;

Answer 1

1）您必须在data属性中定义显示/隐藏对话框的属性：

data:function(){
    return {
      showDialog: false,
      [...]

2）然后将v - model属性添加到el-popover：

<el-popover placement="top" trigger="click" title="Sure？" v-model="showDialog">

3）最后在Cancel/Sure按钮上定义操作，对于＆＃39;取消＆＃39;您只需将属性设置为false：

即可

<el-button type="text" size="mini" @click="showDialog=false">Cancel</el-button>

对于＆＃39;当然＆＃39;，因为你必须添加更多代码，你可以在click方法中设置属性：

remove(){
  //DO THE REMOVE ACTION!
  this.showDialog=false;
}

请看一下完整的例子：

＆＃13;

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(){
      //DO THE REMOVE ACTION!
      this.showDialog=false;
    }
  }
})

＆＃13;

<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" title="Sure？" v-model="showDialog">
            <div class="btn-confirm">
              <el-button type="text" size="mini" @click="showDialog=false">Cancel</el-button>
              <el-button type="primary" size="mini" @click="remove(scope)">Sure</el-button>
            </div>
          </el-popover>
        </template>


      </el-table-column>
    </el-table>
</div>

＆＃13;

我希望它可以帮助你，再见。

Answer 2

如果您有超过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删除确认对话框将同时显示。

Answer 3

几个小时后，我终于找到了办法，做了一点点代码挖掘。使用'：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>

vue在表中使用elementUI <el-popover>

4 个答案: