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

【问题标题】：vue use elementUI <el-popover> in tablevue 在表格中使用 elementUI <el-popover>
【发布时间】：2018-04-09 06:42:24
【问题描述】：

我有一个打开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>

【问题讨论】：

“不清楚你在问什么”请澄清你的具体问题？
当我点击删除按钮时，我点击取消按钮或确定按钮，如何隐藏el-popover
“不清楚你在问什么”请澄清你的具体问题？
这在我看来像是<el-popover> 中的一个错误，它应该正确检查defaultPrevented 属性
查看代码sn-p

标签： vue.js vuejs2 element-ui

【解决方案1】：

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

数据：[ { 编号：1，名称：'jak'，年龄：24，显示对话框：假 },
然后将 v-model 属性添加到el-popover：
最后定义Cancel/Sure按钮上的操作，对于“取消”，您可以简单地将属性设置为false：

取消

对于'Sure'，由于要添加更多代码，可以在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>

希望对你有帮助，再见。

【讨论】：

我认为这不是一个有效的例子。因为当您单击任何删除按钮时，所有弹出窗口都会打开。为了解决这个问题，您需要添加 showDialogs 变量，您将在其中放置有关每个弹出窗口状态（打开/关闭）的信息并设置 v-model="showDialogs[scope.row.id]"。
谢谢@ГеннадийПрохоренко 我修复了它，并且我还使 sn-p 可执行，3 年后:-)。再见。

【解决方案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个删除确认对话框。

【讨论】：

我在这里找到了一个很好的解决方法：segmentfault.com/q/1010000010256899

【解决方案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();
    }
  }
})

【讨论】：

【解决方案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>

【讨论】：

请为您的回答提供描述。