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.mfbz.cn/a/155535.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【蓝桥杯 第十五届模拟赛 Java B组】训练题(A - I)

目录 A、求全是字母的最小十六进制数 B、Excel表格组合 C、求满足条件的日期 D、 取数字 - 二分 (1)暴力 (2)二分 E、最大连通块 - bfs F、哪一天? G、信号覆盖 - bfs (1)bfs&#xf…

指静脉采集模组之调节Sensor

修改程序中gc0308_sensor_default_regs[]的类容,0x22寄存器的值改为0x55,关闭白平衡,0xd2寄存器的值改为0x10,关闭自动曝光。目前输出的图像没有自动曝光和自动白平衡,但是帧率比之前更低了。 以下是开启曝光模式和关闭曝光模式下…

论文排版一步搞定之图表题注——(图标自动编号,引用题注)

同学们在撰写研究生毕业大论文时,一定会进行章节的多次调整,不到最后一刻很难定稿。此时,一幅插图或表格位置的变化可能会导致此章内大部分插图或表格编号的变化,插图和表格编号的改变同样会使得前文的引用发生变化。牵一发而动全…

idea中误删.iml和.idea文件,如何处理

目录 一、问题描述 二、解决方案 1、理论知识 (1).iml 文件 (2).idea文件 2、操作环境 3、操作步骤 (1)找到【Maven】工具按钮 (2)点图标,重复导入maven项目&am…

【操作系统】内存的非连续分配管理

文章目录 前言非连续分配管理基本分页存储管理方式基本地址变换机构具有快表的地址变换机构两级页表 基本分段存储管理方式段页式管理方式 前言 在了解完内存的连续分配管理的三种方式后,可以看到它们之所以称之为连续分配是因为都有一个共同特点:每个进…

设计模式-适配器-笔记

适配器模式Adapter 动机(Motivation) 在软件系统中,由于应用环境的变化,常常需要将“一些现存的对象”放在新的环境中应用,但是新环境要求的接口是在这些现存对象所不满足的。 如何应对这种“迁移的变化”&#xff1…

QNX Typed memory介绍

文章目录 前言一、什么是 Typed memory二、查看系统已有Typed memory 的方法三、Typed memory 的使用方法1.定义一个packet memory并从系统内存中分出它1.1 as_add()1.2 as_add_containing()2. 从 Typed memory 中申请内存2.1 POSIX method 申请内存2.2 QNX Neutrino method 申…

redis设置密码

首先到redis的下载目录下:运行 redis-cli 查看redis密码: config get requirepass 设置redis密码为123456: config set requirepass 123456

GDS 命令的使用 srvctl service TAF application continuity

文档中prim and stdy在同一台机器上,不同机器需要添加address list TAF ENABLED GLOBAL SERVICE in GDS ENVIRONMNET 12C. (Doc ID 2283193.1)​编辑To Bottom In this Document Goal Solution APPLIES TO: Oracle Database - Enterprise Edition - Version 12.1.…

Windows系统中搭建docker (ubuntu,Docker-desktop)

一、docker安装前的准备工作 1. 开启CPU虚拟化,新电脑该默认是开启的,如果没开启可以根据自己电脑型号品牌搜索如克开启CPU虚拟化。当开启成功后可在设备管理器中看到。 2.开通Hyper-V 通过 Windows 控制面板 --> 程序和功能 -->启用或关闭…

系列五、JVM的内存结构【PC寄存器】

一、位置 CPU中 二、作用 每个线程都有一个程序计数器,是线程私有的,所谓PC寄存器其实就是一个指针,指向方法区中的方法字节码(用来存储指向下一条指令的地址,也即将要执行的指令代码),由执行引…

基于PHP的纺织用品商城系统

有需要请加文章底部Q哦 可远程调试 基于PHP的纺织用品商城系统 一 介绍 此纺织用品商城系统基于原生PHP开发,数据库mysql,前端bootstrap。用户可注册登录,购物下单,评论等。管理员登录后台可对纺织用品,用户&#xf…

一文浅入Springboot+mybatis-plus+actuator+Prometheus+Grafana+Swagger2.9.2开发运维一体化

Swagger是一个规范和完整的框架,用于生成、描述、调用和可视化 RESTFUL风格的Web服务,是非常流行的API表达工具。 Swagger能够自动生成完善的 RESTFUL AP文档,,同时并根据后台代码的修改同步更新,同时提供完整的测试页面来调试API。 Prometheus 是一个开源的服务监控系统和时…

​软考-高级-系统架构设计师教程(清华第2版)【第9章 软件可靠性基础知识(P320~344)-思维导图】​

软考-高级-系统架构设计师教程(清华第2版)【第9章 软件可靠性基础知识(P320~344)-思维导图】 课本里章节里所有蓝色字体的思维导图

锂离子电池充电管理芯片应用

基本概述 TP4054是一个完善的单片锂离子电池恒流/恒压线性电源管理芯片。 更值得一提的是,TP4054专门设计适用于USB的供电规格。得益于内部的MOSFET结构,在应用上不需要外部电阻和阻塞二极管。在高能量运行和高外围温度时,热反馈可以控制充…

uniapp Android如何授权打开系统蓝牙Bluetooth?

uniapp Android如何授权打开系统蓝牙? 使用uniapp开发蓝牙项目过程中,涉及到检测手机系统蓝牙是否打开功能,这里介绍Android,iOS暂时没有找到优方法。朋友们如果有好的方案,欢迎评论分享~ 文章目录 uniapp Android如何…

SDL音视频渲染

01-SDL简介 官网:https://www.libsdl.org/ 文档:http://wiki.libsdl.org/Introduction SDL(Simple DirectMedia Layer)是一套开放源代码的跨平台多媒体开发库,使用C语言写成。SDL提供了数种控制图像、声音、输出入的函…

ESP32 Arduino实战基础篇-使用 ADC 读取模拟值

本文介绍如何使用 Arduino IDE 读取 ESP32 的模拟输入。模拟读数对于读取电位计或模拟传感器等可变电阻器的值非常有用。 使用 ESP32 读取模拟输入就像使用模拟读取(GPIO)函数,它接受您想要读取的 GPIO 作为参数。 模拟输入 (ADC) 使用 ESP32 读取模拟值意味着您可以测量 0 …

Anaconda的安装使用及pycharm设置conda虚拟环境

1.python和包以及anaconda的概念关系 python “工人” 包 “工具” 环境 “工具箱” anaconda “放很多工具箱的大箱子” python等于工人这个好理解,就是编程需要用python来实现对应功能,即工人完成某项工程。 包等于工具,就是工人…

使用VC++实现分段线性变换,直方图均衡化、锐化处理(使用拉普拉斯算子)

图像锐化1 实验要求 5.1实验目的、要求 实验目的: (1)掌握图像增强的原理与相关方法。 (2)能使用VC实现图像增强的一些相关功能。 实验要求: A部分: (1)对一幅256级灰度…
最新文章