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.mzph.cn/news/149460.shtml

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

相关文章

设置指定时间之前的时间不可选

1、el-date-picker设置今天之前的日期不可选 <el-date-picker style"width: 100%" type"date" v-model"form.resetDate" align"right" :value-format"yyyy-MM-dd" placeholder"选择调整日期":disabled"t…

场景交互与场景漫游-路径漫游(7)

路径漫游 按照指定的路径进行漫游对一个演示是非常重要的。在osgViewer中&#xff0c;当第一次按下小写字母“z”时&#xff0c;开始记录动画路径;待动画录制完毕&#xff0c;按下大写字母“Z”&#xff0c;保存动画路径文件;使用osgViewer读取该动画路径文件时&#xff0c;会回…

基于STC12C5A60S2系列1T 8051单片的IIC总线器件模数芯片PCF8591实现模数转换应用

基于STC12C5A60S2系列1T 8051单片的IIC总线器件模数芯片PCF8591实现模数转换应用 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式及配置STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式介绍IIC总线器件模数芯片PCF8591介绍通过I…

C/C++ 语言 ‘ == ‘ 运算符仅适用于算数表达式

示例代码&#xff1a; #include <stdio.h>typedef struct {int a;int b; } TestStruct;int main(void) {TestStruct testA { 0 }, testB { 0 };if (testA testB) {printf("You can do this!\n");}return 0; }

通过U盘重装Win10教程图解

如果我们发现Win10电脑系统出现了问题&#xff0c;可以通过简单的操作来解决问题。如果还是不能解决系统问题&#xff0c;这时候用户就给电脑重新安装Win10系统&#xff0c;这样就能轻松解决问题了。接下来小编给大家详细介绍关于通过U盘重新安装系统Win10的方法步骤。 准备工作…

Linux基础知识——(2)vim编辑器

目录 1 vi和vim简介2 vim三种模式3 vim命令模式3.1 光标移动3.2 复制操作3.3 剪切/删除3.4 撤销/恢复3.5 光标的快速移动 4 模式间的切换5 命令行模式5 编辑模式6 其他6.1 vim的配置文件6.2 异常退出6.3 退出方式“:x”6.4 vi编辑模式下Backspace无法退格删除6.5 修改只读【rea…

使用uniapp写小程序,真机调试的时候不显示log

项目场景&#xff1a; 当小程序文件太大的情况下使用真机调试&#xff0c;但是真机调试的调试器没有任何反应 问题描述 使用uniapp写小程序&#xff0c;真机调试的时候不显示log 原因分析&#xff1a; 提示&#xff1a;因为真机调试的时候没有压缩文件&#xff0c;所以调试的…

ruoyi-vue前后端分离版本验证码实现思路

序 时隔三个月&#xff0c;再次拿起我的键盘。 前言 ruoyi-vue是若依前后端分离版本的快速开发框架&#xff0c;适合用于项目开始搭建后台管理系统。本篇文章主要介绍其验证码实现的思路。 一、实现思路简介 1、后端会生成一个表达式&#xff0c;比如1 2 ? 3&#xff0…

react 手机端 rc-table列隐藏(根据相关条件是否隐藏)、实现图片上传操作

最近公司某一项目的手机端&#xff0c;新增需求&#xff1a;table中的附件要可以编辑&#xff0c;并且是在特定条件下可编辑&#xff0c;其他仅做展示效果。 查阅官方文档&#xff0c;没有发现是否隐藏这一属性&#xff0c;通过css控制样式感觉也比较麻烦&#xff0c;后面发现可…

再见 Excel,你好 Python Spreadsheets!⛵

Excel是大家最常用的数据分析工具之一&#xff0c;借助它可以便捷地完成数据清理、统计计算、数据分析&#xff08;数据透视图&#xff09;和图表呈现等。 但是&#xff01;大家有没有用 Excel 处理过大一些的数据&#xff08;比如几十上百万行的数据表&#xff09;&#xff0…

从矿源到指尖——周大福天然钻石的非凡实力

&#xff08;2023年11月20日&#xff0c;北京&#xff09;在近百年历程中&#xff0c;周大福珠宝集团一直致力珠宝工艺传承与创新设计的孕育&#xff0c;于1929年创立周大福品牌&#xff0c;凭借对中国传统黄金工艺的传承与创新、对中国传统文化的融合与发扬&#xff0c;将黄金…

wpf devexpress绑定grid到总计和分组统计

此主题描述了如何在gridcontrol中的视图模型和显示定义总计和分组统计 在视图模型中指定统计 1、创建 SummaryItemType 枚举你想要在GridControl中显示的统计类型&#xff1a; public enum SummaryItemType { Max, Count, None } 2、创建一个grid统计描述类 public class S…

世界坐标系,相机坐标系,像素坐标系转换 详细说明(附代码)

几个坐标系介绍&#xff0c;相机内外参的回顾参考此文。 本文主要说明如何在几个坐标系之间转换。 本文涉及&#xff1a; 使用相机内参 在 像素坐标系 和 相机坐标系 之间转换。使用相机外参&#xff08;位姿&#xff09;在相机坐标系 和 世界坐标系 之间转换。(qw,qx,qy,qz,…

【C++】pow函数实现的伽马变换详解和示例

本文通过原理和示例对伽马变换进行详解&#xff0c;并通过改变变换系数展示不同的效果&#xff0c;以帮助大家理解和使用。 原理 伽马变换是一种用于图像增强的技术&#xff0c;它可以用来提高或降低图像的对比度&#xff0c;常用于医学图像处理和计算机视觉等领域。伽马变换…

姿态估计 MediaPipe实现手势,人体姿态,面部动作估计的用法

姿态估计 MediaPipe实现手势&#xff0c;人体姿态&#xff0c;面部动作估计的用法 import mediapipe as mp import cv2 import numpy as np import time # 定义一个函数&#xff0c;计算两个点的距离 def findDis(pts1,pts2):return ((pts2[0]-pts1[0])**2 (pts2[1]-pts1[1])*…

媒体行业的3D建模:在影视中创造特效纹理

在线工具推荐&#xff1a; 三维数字孪生场景工具 - GLTF/GLB在线编辑器 - Three.js AI自动纹理化开发 - YOLO 虚幻合成数据生成器 - 3D模型在线转换 - 3D模型预览图生成服务 在本文中&#xff0c;我们将探讨 3D 建模在媒体行业中的作用&#xff0c;特别是它在影视特效创作…

反渗透水处理成套设备有哪些

反渗透水处理成套设备主要包括反渗透装置、预处理系统、控制系统等部分。 反渗透装置&#xff1a;反渗透水处理设备的核心部分&#xff0c;由反渗透膜、压力容器、膜组件等组成。反渗透膜是一种高分子材料制成的半透膜&#xff0c;能够截留水中的溶解盐、有机物、细菌等杂质&a…

(动手学习深度学习)第13章 计算机视觉---微调

文章目录 微调总结 微调代码实现 微调 总结 微调通过使用在大数据上的恶道的预训练好的模型来初始化模型权重来完成提升精度。预训练模型质量很重要微调通常速度更快、精确度更高 微调代码实现 导入相关库 %matplotlib inline import os import torch import torchvision f…

Midjourney绘画提示词Prompt参考学习教程

一、工具 SparkAi&#xff1a; SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软…

SDL2 播放音频数据(PCM)

1.简介 这里以常用的视频原始数据PCM数据为例&#xff0c;展示音频的播放。 SDL播放音频的流程如下&#xff1a; 初始化音频子系统&#xff1a;SDL_Init()。设置音频参数&#xff1a;SDL_AudioSpec。设置回调函数&#xff1a;SDL_AudioCallback。打开音频设备&#xff1a;SD…