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组件,这个时候的绑定值是不可靠的,因为表格渲染多少行,就需要绑定多少个值,另外尽量不要绑定到数据表格的数据上,容易造成错乱。

相关推荐
midsummer_woo18 分钟前
基于springboot的在线教育系统(源码+论文)
vue.js·spring boot·mysql
Fly-ping1 小时前
【前端】JavaScript 的事件循环 (Event Loop)
开发语言·前端·javascript
在逃的吗喽2 小时前
黑马头条项目详解
前端·javascript·ajax
JHCan3333 小时前
一个没有手动加分号引发的bug
前端·javascript·bug
天涯学馆4 小时前
为什么越来越多开发者偷偷用上了 Svelte?
前端·javascript·svelte
拾光拾趣录4 小时前
为什么浏览器那条“假进度”救不了我们?
前端·javascript·浏览器
香菜狗4 小时前
vue3响应式数据(ref,reactive)详解
前端·javascript·vue.js
拾光拾趣录4 小时前
为什么我们要亲手“捏”一个 Vue 项目?
前端·vue.js·性能优化
油丶酸萝卜别吃5 小时前
SSE与Websocket有什么区别?
前端·javascript·网络·网络协议
27669582925 小时前
拼多多小程序 anti_content 分析
java·javascript·python·node·拼多多·anti-content·anti_content