vue解决element-ui popover点击取消时 popover的显示与隐藏问题

最新推荐文章于 2024-11-08 18:09:13 发布

转载最新推荐文章于 2024-11-08 18:09:13 发布 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/qq_36410795/article/details/90004847

文章标签：

#elementui #el-popover

【Vue/React】同时被 2 个专栏收录

36 篇文章

订阅专栏

【html5/css3】

26 篇文章

订阅专栏

本文档记录了在使用ElementUI的Table组件时遇到的问题，即当尝试通过数据遍历并使用template插槽实现popover操作列时遇到的困扰。解决方案是为el-popover添加ref属性，并在点击确认或取消按钮时调用对应的关闭方法。具体代码示例中展示了如何在popover中添加删除操作，并在点击按钮后执行相应的回调操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在项目中使用 elementui 中的table组件popover进行开发，官网的案例如果使用数据遍历，操作列使用 <template></template> 做插槽的话就不行了。记录下解决办法：

1. popover演示效果

在这里插入图片描述

2. 解决办法如下

在 el-popover 中加属性 :ref="popover-${scope.$index}"

取消 el-button 按钮加 @click="scope._self.$refs[popover-${scope.$index}].doClose()"

具体代码如下：

<template slot-scope="scope">
  <div class="operation">
    <el-popover trigger="click"  :ref="`popover-${scope.$index}`"  placement="top" width="100" >
      <p class="el-icon-warning">  确定删除</p>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="scope._self.$refs[`popover-${scope.$index}`].doClose()" >取消</el-button>
        <el-button type="primary" size="mini" @click="scope._self.$refs[`popover-${scope.$index}`].doClose()" >确定</el-button>
      </div>
      <span slot="reference">删除</span>
    </el-popover>
  </div>
</template>

3. 在确认按钮和取消按钮中做回调操作

页面vue组件

<el-button size="mini" type="text" @click="no(scope)">取消</el-button>
<el-button type="primary" size="mini" @click="yes(scope)">确定</el-button>

methods方法

methods: {
	yes(scope){
	  // 可以在这里执行删除数据的回调操作.......删除操作......
	  this.$message({
	    message:"点击了删除操作了",type: 'success'
	  });
	  scope._self.$refs[`popover-${scope.$index}`].doClose()
	},
	
	no(scope){
	  this.$message('点击了取消操作');
	  scope._self.$refs[`popover-${scope.$index}`].doClose()
	}
}