el-table中el-popover失效问题

news2024/11/29 4:01:21

场景:先有一个数据表格,右侧操作栏为固定列,另外有一个字段使用了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.coloradmin.cn/o/1218361.html

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

相关文章

蓝桥杯 vector

vector的定义和特性 注意&#xff1a;vector需要开C11标准 vector的常用函数 push_back():将元素添加到vector末尾 pop_back():删除vector末尾的元素 begin()和end():返回指向vector第一个元素和最后一个元素之后一个位置的迭代器。 示例 vector<int> vec{10,20,30};f…

Leetcode刷题详解——衣橱整理

1. 题目链接&#xff1a;LCR 130. 衣橱整理 2. 题目描述&#xff1a; 家居整理师将待整理衣橱划分为 m x n 的二维矩阵 grid&#xff0c;其中 grid[i][j] 代表一个需要整理的格子。整理师自 grid[0][0] 开始 逐行逐列 地整理每个格子。 整理规则为&#xff1a;在整理过程中&am…

【Linux】环境变量--PATH环境变量/环境变量的操作/命令行参数

文章目录 一、PATH环境变量1.什么是PATH环境变量2.如何添加PATH环境变量3.系统中的其他环境变量4.环境变量的来源 二、环境变量的操作1.设置环境变量2.通过getenv获取环境变量3.环境变量的意义 三、命令行参数 一、PATH环境变量 1.什么是PATH环境变量 这里我们先提出一个问题…

限制Domain Admin登录非域控服务器和用户计算机

限制Domain Admin管理员使用敏感管理员帐户(域或林中管理员组、域管理员组和企业管理员组中的成员帐户)登录到信任度较低的服务器和用户端计算机。 此限制可防止管理员通过登录到信任度较低的计算机来无意中增加凭据被盗的风险。 建议采用的策略 建议使用以下策略限制对信任度…

Python 自动化: eip、cen监控数据对接到 grafana

新钛云服已累计为您分享775篇技术干货 概览 日常运维中&#xff0c;我们有时需要关注阿里云中 EIP 和 CEN 的监控数据&#xff0c;如果每次登录到平台查看&#xff0c;不太方便。 可以通过 API 获取监控数据&#xff0c;并输入到 influxDB&#xff0c;然后再到 Grafana 中展示&…

2023最新最全【虚幻4引擎】下载安装零基础教程

1、创建Epic Games账户 我们先打开浏览器&#xff0c;输入以下网址&#xff1a;unrealengine.com 随后点击【立即开始】 选择许可证类型&#xff0c;此处提供三种选项&#xff0c;分别是【游戏】、【非游戏】以及【私人定制】 第一类许可证适用于游戏和商业互动产品&#xff…

CSS特效012:边框线条环绕流动效果

CSS常用示例100专栏目录 本专栏记录的是经常使用的CSS示例与技巧&#xff0c;主要包含CSS布局&#xff0c;CSS特效&#xff0c;CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点&#xff0c;CSS特效主要是一些动画示例&#xff0c;CSS花边是描述了一些CSS…

小程序如何添加打印机来打印订单

在采云小程序中&#xff0c;支持打印订单的小票、标签、发货单和电子面单。小票打印机用于打印小票&#xff0c;类似于超市小票、外卖小票等。标签打印机用于打印商品标签&#xff0c;类似于奶茶上面粘贴的标签&#xff0c;用于表示饮料名称和规格等。货单打印机用于打印发货单…

Rust 语言中的结构体

目录 1、结构体 2、结构体的定义和实例化 2.1 使用字段初始化简写语法 2.2 使用结构体更新语法从其他实例创建实例 2.3 没有命名字段的元组结构体 2.4 没有任何字段的类单元结构体 2.5 结构体示例程序 3、方法 3.1 关联函数 3.2 多个 impl 块 1、结构体 struct&…

C++二分查找算法:规划兼职工作

题目 你打算利用空闲时间来做兼职工作赚些零花钱。 这里有 n 份兼职工作&#xff0c;每份工作预计从 startTime[i] 开始到 endTime[i] 结束&#xff0c;报酬为 profit[i]。 给你一份兼职工作表&#xff0c;包含开始时间 startTime&#xff0c;结束时间 endTime 和预计报酬 pro…

DDR3 的相关设计规范(个人总结)

文章目录 阻抗控制布局布线电源处理时序要求 DDR3 的相关设计规范(个人总结) 阻抗控制 DDR3 要严格控制阻抗&#xff0c;单线 50ohm&#xff0c;差分 100ohm&#xff0c;差分一般为时钟、DQS。在走线过程中&#xff0c;尽量减小阻抗跳变的因素&#xff0c;比如:换层(无法避免…

Python编程技巧 – 使用列表(list)

Python编程技巧 – 使用列表(list) Python Programming Skills – Using a List 在Python编程语言中&#xff0c;我们会用到许多列表&#xff08;List&#xff09;。 一门强大的编程语言会包含列表&#xff08;或者数组&#xff09;的数据结构。列表&#xff08;或数组&#…

workman使用手册1.0

workman官网地址&#xff1a;高性能PHP应用容器 workerman 1&#xff1a;把workman项目放到linux服务器后&#xff0c;需要启动你的php文件&#xff0c;才可以使用 定位到项目根目录&#xff1a;例&#xff1a;cd /mnt/workman 启动代码&#xff1a;php outin.php start -d 停…

【计算机网络笔记】网络地址转换(NAT)

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能&#xff08;1&#xff09;——速率、带宽、延迟 计算机网络性能&#xff08;2&#xff09;…

鸿蒙LiteOs读源码教程+向LiteOS中添加一个系统调用

本文分为2个部分&#xff1a;第1部分简要介绍如何读鸿蒙Liteos源码&#xff0c;第2部分是实验向LiteOS中添加一个系统调用的完整过程。 前置资料&#xff1a; imx6ull开发板使用方式详解 源码下载 编译运行简单程序 Ubuntu虚拟机使用鸿蒙LiteOs操作系统常见错误汇总 一、鸿…

二进制的形式在内存中绘制一个对象实例

一、引用类型实例的内存布局 从内存布局的角度来看&#xff0c;一个引用类型的实例由如下图所示的三部分组成&#xff1a;ObjHeader TypeHandle Fields。前置的ObjHeader用来缓存哈希值和同步状态&#xff0c;TypeHandle部分存储类型对应方法表&#xff08;Method Table&…

2023年亚太杯数学建模思路 - 复盘:光照强度计算的优化模型

文章目录 0 赛题思路1 问题要求2 假设约定3 符号约定4 建立模型5 模型求解6 实现代码 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 问题要求 现在已知一个教室长为15米&#xff0c;宽为12米&…

Golang 协程、主线程

Go协程、Go主线程 1)Go主线程(有程序员直接称为线程/也可以理解成进程):一个Go线程上&#xff0c;可以起多个协程&#xff0c;你可以这样理解&#xff0c;协程是轻量级的线程。 2)Go协程的特点 有独立的栈空间 共享程序堆空间 调度由用户控制 协程是轻量级的线程 go线程-…

[CSS] 文本折行

文本折行一般分为两种情况&#xff1a; CJK&#xff08;Chinese/Japanese/Korean&#xff09; 字符和非 CJK 字符。一般非 CJK 字符折行发生在两个单词的空格中间&#xff0c;见下图&#xff1a; 图中文本 “hello world” 包裹容器的宽度为 2rem&#xff0c;但是 hello 并没有…

RocketMQ的适用场景有哪些?

程序员的公众号&#xff1a;源1024&#xff0c;获取更多资料&#xff0c;无加密无套路&#xff01; 最近整理了一波电子书籍资料&#xff0c;包含《Effective Java中文版 第2版》《深入JAVA虚拟机》&#xff0c;《重构改善既有代码设计》&#xff0c;《MySQL高性能-第3版》&…