el-table中el-popover失效问题

场景:先有一个数据表格,右侧操作栏为固定列,另外有一个字段使用了el-popover来点击弹出框来修改值,发现不好用,点击后无法显示弹出框,但当没有操作栏权限时却意外的生效了。

这种问题真是不常见,因为几乎没有人会在表格中使用el-popover来用于修改值,往往都是使用el-dialog来修改form表单,不知道是什么需求,为啥这样写。

先看一下你的不同el-popover组件 是否绑定了同一个值 ,如果是,则问题所在就是如此,因为el-popover不支持绑定同一个值。(直接看下面的解决方案)

1. 问题根源

我们对比一下加上固定列属性(fixed)和不加的区别
没加:
在这里插入图片描述
加了:
在这里插入图片描述
很明显,多了两个fixed-right,再看一下fixed-right中的内容:
在这里插入图片描述
原来是把table复制了一遍,这样的话就相当于有两个el-popover组件同时绑定了一个值,造成了无法显示问题。

2. 解决

  1. 使用el-dialog来修改值。
  2. 点击内容替换成el-input,el-input绑定值,然后失焦后保存值。
  3. 不绑定值,给每个el-popover一个动态的ref可以使用数据ID拼凑,关闭时使用ref获取组件,调用doClose方法。

3. 总结

使用框架有很多未知可能性,所以我们尽量使用比较规范的代码。如上述问题,即使不添加fixed属性,表格也会渲染很多el-popover组件,这个时候的绑定值是不可靠的,因为表格渲染多少行,就需要绑定多少个值,另外尽量不要绑定到数据表格的数据上,容易造成错乱。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/195334.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

23111705[含文档+PPT+源码等]计算机毕业设计SSM框架美妆商城全套电商购物

文章目录 **软件开发环境及开发工具:****项目功能介绍:****论文截图:****实现:****代码片段:** 编程技术交流、源码分享、模板分享、网课教程 🐧裙:776871563 软件开发环境及开发工具&#xff…

Web前端—小兔鲜儿电商网站底部设计及网站中间过渡部分设计

版本说明 当前版本号[20231117]。 版本修改说明20231116初版20231117补充完后面未发布的内容 目录 文章目录 版本说明目录底部(footer)服务帮助中心版权 banner侧边栏圆点 新鲜好物(goods)标题内容 人气推荐热门品牌生鲜 生鲜内…

Resolume Arena 7.15.0(VJ音视频软件)

Resolume Arena 7是一款专业的实时视觉效果软件,用于创造引人入胜的视频演出和灯光秀。它提供了丰富多样的功能和工具,可以将音频、视频和图像合成在一起,创造出令人惊叹的视觉效果。 Resolume Arena 7支持多种媒体格式,包括视频文…

B031-网络编程 Socket Http TomCat

目录 计算机网络网络编程相关术语IP地址ip的概念InerAdress的了解与测试 端口URLTCP、UDP和7层架构TCPUDPTCP与UDP的区别和联系TCP的3次握手七层架构 Socket编程服务端代码客户端代码 http协议概念Http报文 Tomcat模拟 计算机网络 见文档 网络编程相关术语 见文档 IP地址 …

【C++】数组中出现次数超过一半的数字

代码&#xff1a; class Solution { public:/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规定的值即可** * param numbers int整型vector * return int整型*/int MoreThanHalfNum_Solution(vector<int>& numbers) {int …

一键免费去除视频水印和字幕的AI工具

最近有学员经常让我分享好用的智能抹除视频水印字幕AI工具&#xff0c;今天就给大家分享一个我经常用到的这款工具——腾讯智影&#xff0c;这个平台提供的智能抹除功能&#xff0c;借助这个工具我们可以将视频中不需要的字幕或者水印删除掉。 不过这款工具每天有三次免费次数…

JavaEE进阶学习:Spring 的创建和使用

Spring 就是⼀个包含了众多工具方法的 IoC 容器。既然是容器那么它就具备两个最基本的功能&#xff1a; 将对象存储到容器&#xff08;Spring&#xff09;中从容器中将对象取出来 接下来使用 Maven 方式来创建一个 Spring 项目&#xff0c;创建 Spring 项目和 Servlet 类似&a…

Neo4j安装(Docker中安装Neo4j)

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

clion qt导出dll给别的项目用

clion 导出dll给别的项目用&#xff0c;并且引入matplotcpp dll生成一个mydll的dll文件 1.先做一个简单dll的测试下 cmake_minimum_required(VERSION 3.26) project(untitled) set(CMAKE_CXX_STANDARD 11) add_library(untitled SHARED main.cpp)main.h void hello();main.cp…

『C++成长记』C++入门——内联函数

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;C &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、内联函数 &#x1f4d2;1.1内联函数的概念 &#x1f4d2;1.2内联函数的特征 …

Web前端—移动Web第一天(平面转换、渐变、综合案例--播客网页设计)

版本说明 当前版本号[20231117]。 版本修改说明20231117初版 目录 文章目录 版本说明目录移动 Web 第一天01-平面转换简介示例 平移定位居中案例-双开门旋转转换原点案例-时钟多重转换缩放案例-播放特效倾斜 02-渐变线性渐变案例-产品展示径向渐变 03-综合案例导航-频道箭头…

学人工智能等于失业?

随着科技的快速发展&#xff0c;人工智能已经渗透到我们生活的方方面面&#xff0c;从手机、智能家居到自动驾驶汽车&#xff0c;都离不开人工智能技术的支持。 因此&#xff0c;学习人工智能已经成为越来越多人追求高薪职业的选择。在这篇文章中&#xff0c;我们将探讨学习人…

asp.net core mvc之 过滤器

过滤器允许我们在Action执行之前和执行之后去执行一下业务代码 一、过滤器的作用域 1、全局过滤器&#xff0c; 在Startup.cs文件中注册 2、控制器过滤器&#xff0c; 在控制器类上面使用标注 3、action过滤器 二、全局过滤器使用 1、在 core 目录&#xff0c;添加 TestA…

Linux系统下安装go

目录 下载go安装包解压包并安装添加环境变量验证是否安装成功 下载go安装包 官网地址&#xff1a;go 解压包并安装 复制好包的下载链接后使用下面命令进行安装&#xff1a; curl -O https://storage.googleapis.com/golang/go1.11.1.linux-amd64.tar.gz mkdir -p ~/installe…

论文学习——THE USTC SYSTEM FOR ADRESS-M CHALLENGE

文章目录 引言正文Abstract模型基本结构模型效果汇总 Introduction介绍跨语言任务的独特性思路启发和变化如何使用预定义好的音频特征如何使用预定义好的语言模型——语言模型中获取韵律信息结果说明 Dataset数据集Mthods方法使用设计好的特征进行AD检测使用的特征分类和训练方…

【人工智能】本地运行开源项目MMSegmentation引发的问题

文章目录 ❌AssertionError: Torch not compiled with CUDA enabled问题描述问题分析解决方案总结参考文献 ❌AssertionError: Torch not compiled with CUDA enabled 问题描述 python demo/image_demo.py demo/demo.png configs/pspnet/pspnet_r50-d8_4xb2-40k_cityscapes-5…

MySQL主主复制

主1 192.168.66.15 主2 192.168.66.16 主1&#xff1a; roottest2 ~]# hostname master1 [roottest2 ~]# bash [rootmaster1 ~]# vim /etc/my.cnf server-id11 log-binmysql-bin auto_increment_increment2 auto_increment_offset1 replicate-do-dbdemo_db …

android初集成flutter,遇到的问题

环境 studio版本&#xff1a;2022.1.1 flutter版本&#xff1a;2.8.0 电脑&#xff1a;mac flutter项目总是报错&#xff0c;编译不过 以 Resources Root 加载 记得设置dart&#xff1a;主工程和flutter项目都需要设置&#xff0c;否则不出现手机链接 下面这个样子就是好了&…

腾讯云服务器新用户购买优惠多少钱?腾讯云新用户优惠信息来了!

腾讯云服务器新用户购买优惠多少钱&#xff1f;这是每个新手上路的人都会问到的问题。 如果你是一个刚刚接触云服务器的小白用户&#xff0c;不知道该如何选择合适的云服务器&#xff0c;那么你就来对了地方。今天我们将向你介绍腾讯云服务器新用户购买优惠活动&#xff0c;让…

ubuntu 20.04+ORB_SLAM3 安装配库教程

目录 安装ros(如果只是运行ORB-SLAM3&#xff0c;可以跳过安装)0. ros 安装教程1. 安装opencv2. 安装Pangolin3. 安装Eigen34.安装Python & libssl-dev5.安装boost库6.安装ceres库&#xff08;不必须&#xff09;7.安装Sophus库&#xff08;不必须&#xff09;8. 安装g20库…