vue使用表中的elementUI

Question

我有一个按钮可以打开一个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>

​

Answer 1

1. 您必须定义一个属性，以便在data属性中显示/隐藏对话框：

数据：[{ id:1，name：'jak'，age: 24，showDialog: false }，

1. ，然后在el-popover

中添加v-**model** 属性

取消按钮和最后的定义操作on

1. ，对于'Cancel‘，你可以简单地将属性设置为false：

Cancel type="text“size="mini”button

为了“确定”，因为你必须添加更多的代码，所以你可以在click方法中设置属性：

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

请看完整的示例：

​

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>

​

希望对你有帮助，再见。

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