当前位置: 首页 > article >正文

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.kler.cn/a/132994.html

相关文章:

  • mysql数据迁移PolarDB
  • 无人机检测车辆——多目标检测
  • TCP(下):三次握手四次挥手 动态控制
  • 前后端、网关、协议方面补充
  • GitHub新手入门 - 从创建仓库到协作管理
  • Springboot 使用EasyExcel导出含图片并设置样式的Excel文件
  • Spring中用了哪些设计模式
  • 电子学会C/C++编程等级考试2021年12月(一级)真题解析
  • Stream流常见操作
  • 微信(小程序开发): 解决播放音乐没有声音的情况 代码不报错的情况下依旧没有声音的解决方案
  • vb.net 实时监控双门双向门禁控制板源代码
  • Michael Jordan最新报告:去中心化机器学习中的契约、不确定性和激励
  • 数据分析思维与模型:相关分析法
  • AIGC: 关于ChatGPT这个智能工具带来的几点思考
  • 【AI应用】 AI语音转换
  • STM32外部中断(EXTI)与RTOS多任务处理的协同设计
  • springBoot集成websocket实时消息推送
  • <MySQL> 什么是JDBC?如何使用JDBC进行编程?
  • 系列四、JVM的内存结构【本地接口(Native Interface)】
  • leecode | 数位和相等数对的最大和
  • 美国经典人工智能教材第3版出版!
  • 【shell 常用脚本30例】
  • vue的生命周期分别是什么?
  • java 访问sqlserver 和 此驱动程序不支持jre1.8错误
  • leetcoe刷题日志-6N字形变换
  • 【数据结构初阶】链表OJ