Vue.js vue使用元素界面<；el popover>；在桌子上

我有一个按钮，可以打开一个

Popover

元素。在对话框中，我有两个按钮：

取消

和

确定

，当我单击其中一个按钮时，我想关闭对话框。 我该怎么做

这是我的代码：

var vm=new Vue({
el:“#应用程序”，
数据：函数（）{
返回{
数据：[
{
id:1，
姓名：“jak”，
年龄:24
},
{
id:2，
名称：“irol”，
年龄:34
}
]
}
},
方法：{
编辑（）{}，
删除（）{
//我怎样才能取消el popover
},
otherClick（）{
}
}
})

编辑
取消
当然
删除

您必须定义一个属性来显示/隐藏

数据属性中的对话框：

数据：[
{
id:1，
姓名：“jak”，
年龄:24岁，
showDialog:false
},

然后将v-

模型

属性添加到

el popover

：

最后，定义

Cancel/Sure

按钮上的操作，对于“Cancel”，您只需将属性设置为

false

：

取消

对于“确定”，由于您必须添加更多代码，因此可以在click方法中设置属性：

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

请查看完整的示例：

var vm=new Vue({
el:“#应用程序”，
数据：函数（）{
返回{
数据：[
{
id:1，
姓名：“jak”，
年龄:24岁，
showDialog:false
},
{
id:2，
名称：“irol”，
年龄:34岁，
showDialog:false
}
]
}
},
方法：{
编辑（）{}，
删除（世界其他地区）{
//执行删除操作！
row.showDialog=false；
}
}
})

编辑

删除
取消
当然

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

几个小时后，我终于找到了解决方法。 使用“：ref”

编辑

删除
取消
当然

var vm=new Vue({
el:“#应用程序”，
数据：函数（）{
返回{
showDialog:false，
数据：[
{
id:1，
姓名：“jak”，
年龄:24
},
{
id:2，
名称：“irol”，
年龄:34
}
]
}
},
方法：{
编辑（）{}，
删除（popRef）{
//执行删除操作！
var child=this.$refs[popRef].doClose（）；
}
}
})

抄袭
编辑
除去

...

---

“不清楚你在问什么”请澄清你的具体问题？当我单击“删除”按钮时，我单击“取消”按钮或“确定”按钮，如何隐藏el popover“不清楚你在问什么”请澄清您的具体问题？在我看来，这好像是

中的一个bug，它应该正确地检查

defaultPrevented

属性查看代码段我发现的一个很好的解决方法是：请为您的答案提供一个描述。我认为这不是一个工作示例。因为当您单击任何删除按钮时，所有弹出窗口都是我将被打开。为了修复此问题，您需要添加showDialogs变量，在该变量中，您将放置有关每个popover状态（打开/关闭）的信息，并设置v-model=“showDialogs[scope.row.id]”。感谢@ГаааааПааааПааааа1072。

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