Vue中多popover点击子组件取消按钮没有

最新推荐文章于 2024-07-30 17:58:40 发布
最新推荐文章于 2024-07-30 17:58:40 发布
阅读量723 收藏
点赞数
文章标签： Vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32043101/article/details/102868452
版权
博客讨论了在Vue中遇到的多popover点击子组件取消按钮失效的问题。官方文档的解决方案不适用于table等循环渲染场景。作者提出了解决方法，通过引用popover对象并调用doClose方法来关闭弹出框，并提供了修改后的代码示例。
摘要由CSDN通过智能技术生成

Vue中多popover点击子组件取消按钮没有

修改前Bug代码

<el-table-column label="操作2" width="200px" align="center">
        <template slot-scope="scope">
          <edit v-if="checkPermission(['ADMIN'])" :data="scope.row" :sup_this="sup_this"/>
          <el-popover
            v-if="checkPermission(['ADMIN'])"
            :ref="scope.row.id"
            placement="top"
            width="180">
最低0.47元/天 解锁文章
Magical_ME
关注
Vue3 - Element Plus 气泡卡片 Popover 手动关闭，支持 v-for 循环出来的多个弹框（el-popover 点击其他区域关闭弹出框，通过点击按钮手动触发关闭隐藏气泡弹框）
王佳斌
09-12 6568
vue3 element plus 气泡卡片el-popover组件，vue3 Popover 气泡卡片怎么手动关闭，element plus el-popover手动关闭，Element plus 饿了么组件库中el-popover气泡框弹出框手动关闭详细教程， element plus气泡弹框el-popover如何点击按钮手动进行隐藏关闭，element plus 解决循环出多个el-popover点击其中一个则其它都关闭，v-for循环多个气泡弹框如何实现关闭各自的弹框，页面v-for循环出来的气泡
el-popover在el-table中，弹出多个以及内部取消按钮无效问题
Abcde467913的博客
10-07 2504
vue3中setup语法糖解决elementui中popover组件无法关闭，多个同时出现的情况
vue2 el-popover取消按钮实现
wikl的博客
12-07 1039
el popover 取消按钮实现
使用到el-popover 的自定义关闭打开方式
qq_46344419的博客
02-14 1636
使用到el-popover 的自定义关闭打开方式
el-popover实现点击空白区域关闭，弹窗区域不关闭
最新发布
qq_43217258的博客
07-30 1120
在 Popover show 的时候监听 document 的 click 事件，触发进入 hidePanel 方法，判断当前点击的 el 是否在 Popover 内部，如果不在，则手动 hide Popover ，并且移除监听事件。普通方法会无法关闭，虚拟触发会导致选一个关一个，不用visible显示的方法太麻烦。而且关键是el-form自己不能挂ref，只能外层套一个div。，表单选项默认挂在body上，你得取消，挂本页面才能不选一下就关闭了。的方法（点击蓝色区域看参考，这大佬vue2的，我vue3）
el-popover 点击其他位置关闭弹窗
hyzsde的博客
11-04 2340
第一次写前端项目，只会一些基础，如有错误请多多指点。
Element组件 Drawer 抽屉的关闭问题
u011280778的博客
09-07 2万+
场景 我使用的Drawer 抽屉是从上往下开的效果，点击搜索图标，从上往下开没问题，输入关键字搜索，搜索出来的列表放置于搜索栏下面，所以使用了一个子组件 问题就来了 搜出来的列表item，点击任意一条，地址栏的路由是变化了，但是这个Drawer 抽屉不会主动关闭， 解决思路 把父组件关于Drawer的实例，传到子组件去，代码如下 再在子组件里通过pros接收 ，代码如下 ...
记录在el-table中使用el-popover遇到的坑
XIYUXU的博客
12-03 3537
由于项目需要实现在表格中删除前进行提示，最终效果如下图。 但在开发过程中点击删除popover弹框不出现，在网上找了很多方法都不能解决问题，就综合了一下。 解决方法： html部分： <el-table-column label="操作"> <template slot-scope="scope"> <el-popover ...
vue 一个组件内多个弹窗_使用vue实现各类弹出框组件
weixin_34116482的博客
12-31 3339
简单介绍一下vue中常用dialog组件的封装：实现动态传入内容，实现取消，确认等回调函数。首先写一个基本的弹窗样式，如上图所示。在需要用到弹窗的地方中引入组件：import dialogBar from './dialog.vue'components:{'dialog-bar': dialogBar,},点击一个按钮显示弹窗，并保证关闭弹窗后再次点击依旧显示在弹窗组件中定义...
Vue 里怎样在 Render 中使用 $refs
SunnyRun
09-04 1361
背景： 使用 element-ui 组件，发现el-popover组件有一个方法: doClose(). 调用方法为 this.refs[′name′].doClose(),经过测试正常使用是没问题的。现在想要在组件内的render函数里调用，一直获取不到this.refs['name'].doClose(), 经过测试正常使用是没问题的。现在想要在组件内的 render 函数里调用， 一直获取不到 this.refs[′name′].doClose(),经过测试正常使用是没问题的。现在想要在组件内的ren
[Vue] element表格中使用el-popover弹窗编辑内容保存和取消的doClose无效解决办法
前端一线搬运工的博客
08-19 3541
解决办法 一 在el-popover中加属性 :ref="`popover-${scope.$index+scope.column.id}`" 隐藏弹窗方法: @click="this.$refs[`popover-${scope.$index+scope.column.id}`].doClose()" // 或@click="scope._self.$refs[`popover-${scope.$index+scope.column.id}`].doClose()" //...
vue解决element-ui popover点击取消时 popover的显示与隐藏问题
@必意玲
05-09 2万+
popover时点击取消时 popover的显示与隐藏问题 1. popover演示实现效果 最近在项目中使用 elementui 中的table组件popover进行开发，官网的案例如果使用数据遍历，操作列使用 <template></template> 做 插槽的话就不行了。 2. 解决办法如下 在el-popover中加属性 :ref="popover-${scop...
el-popover使用doclose关闭窗口不生效
code_carrierV1的博客
05-26 6451
Vue在el-table中使用el-popover遇到的坑 el-table表格中使用el-popover打开和关闭失效的问题及解决过程 在 element-ui 中 el-table 中使用Popover弹框 <el-table-column> <template slot-scope="scope"> <el-popover placement="bottom" title="更多" width="100" trigger="click" :ref="`popover
vue el-popover实现循环+close
---
07-05 1227
重点 <template> <section> <el-button v-for="(item,index) in List" :key="index" @click="butEvent(scope.$index)"> <el-popover :ref="`popover-${index}`" > <el-button><el-link @click="$refs[`popover
VUE中$refs的基本用法
热门推荐
wh710107079的博客
03-06 15万+
ref 有三种用法： 　　1、ref 加在普通的元素上，用this.$refs.（ref值）获取到的是dom元素 　　2、ref 加在子组件上，用this.$refs.（ref值） 获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.$refs.（ref值）.方法（） 就可以使用了。 　　3、如何利用 v-for 和 ref 获取一组数组或者dom 节点 应注意的坑...
Spring Boot +Vue+Spring Security （五)：前后端权限控制
weixin_33747129的博客
01-21 1560
后端权限控制 1、每次请求时，都会带有token，Spring Security会根据token判断用户信息，进行授权。2、对于接口权限的控制，我们可以用过使用Spring的EL表达式配合@PreAuthorize("hasAnyRole('ADMIN')")注解来对接口进行权限控制，这段注解表示，只有当前用户的角色为ADMIN的时候，Spring Security才会放行。注意：建议使用ROLE...
vue+element 表格
你好！刘斩仙
06-06 635
<el-table-column prop="sort" label="排序" align="center"> <template slot-scope="scope"> <span v-show="NoEdit != scope.row.relationshipId">{{scope.row.sort}}<i class="el-icon-...
在el-table中使用el-popover，没法点击确定或取消来关闭
看到我在玩请叫我去敲代码的博客
06-17 9428
事情的经过是这样婶的，肖哥最近接到产品的一个需求，见下图 在一个table里边点击解绑前端账号，左边弹出一个浮框，浮框里边需要两个操作按钮，肖哥根据以往丰富的写代码（搬砖）经验，熟练地打开element官方文档，把popover的代码熟练的搬了过来，三下五除二略加修改，本以为万事大吉，结果却是大相径庭。官方文档中的popover只是针对的单个的情况，像table这种循环渲染popover的情况如...
VUE+ELEMENT UI学习demo
bird_tp的博客
12-18 787
这几天，看了下vue+element ui的一些知识，现在将其写成一个demo，页面下过如下 代码如下： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <%@ taglib prefix="emp" uri="http://www....
vue3点击按钮弹出popover
06-01
在 Vue 3 中，你可以使用 Popover 组件来实现点击按钮弹出气泡弹出框的效果。具体步骤如下： 1. 在需要使用气泡弹出框的页面中引入 Popover 组件： ``` import { defineComponent } from 'vue'; import { Popover ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值