element表格el-table编辑数据弹出框el-dialog的input和select都无法编辑

最新推荐文章于 2024-04-18 18:30:48 发布
原创 最新推荐文章于 2024-04-18 18:30:48 发布 · 2.5k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文解决了一个在使用Element UI组件库开发后台管理系统时遇到的问题：编辑表格数据时，弹出对话框显示数据但无法编辑。问题在于数据传递时只复制了对象引用，导致编辑时数据未真正更新。通过正确地深拷贝数据，问题得以解决。

问题描述:使用element组件库写后台管理系统碰到的问题,编辑表格的数据,弹出dialog弹框,将表格的数据填入弹出框内进行编辑,发现数据填入正确,但是无法进行编辑,input和select都编辑不了!奇怪的是之前都可以,这次却怎么都不行.查了很多资料终于解决了,具体解决如下:

之前:

  将表格中的数据传到弹出框进行拷贝,具体为:

11

修改为:

22

就可以了

因为传过来的值为对象,之前的拷贝方法只是拷贝了对象的引用,所以点击编辑提交的时候会提示数据为空,因为并没有将真正的值赋值给新的对象

桔梗ll
关注
vue3 - 实现element plus表格组件el-table动态增删行功能，可编辑每行内的表单数据字段实时修改更新，Table表格列表动态新增删除控制每行每列的动态数据，添加行编辑行删除行示例！
高级前端工程师
08-20 7092
vue3，element plus，table表格，el-table，表格组件，动态增删表格列表，表格动态添加/删除/编辑行，如何实现表格组件动态增加和移除每行，实现动态添加行/可编辑，表格动态添加或删除行，单元格里编辑input输入框，select下拉选择器框，动态新增一行后可修改里面的数据，动态添加可编辑行，可修改后不生效等点了保存按钮后再生效，延迟生效，编辑修改表格数据后暂时不生效而是等保存后再生效，自定义新增删除table表格的行，及可输入input及下拉框选择，新增一行在表格最后新增一行，单元格内
vue+element实现树状表格的增删改查；使用el-table树形数据与懒加载实现树状表格增删改查
i_am_a_div的博客
12-23 6546
vue+element实现树状表格，使用树形数据与懒加载实现树状表格的增删改查
vue 项目中遇到问题解决记录
weixin_41888013的博客
07-18 4359
目录   1、el-input标签中根据输入框的内容，实时计算某值 2、要在弹出框中使用el-dialog标签触发弹出框时，弹出框层次要进行设置 3、浏览器端缓存数据 下面针对localStorage 和 sessionStorage做个对比分析 4、待续 1、el-input标签中根据输入框的内容，实时计算某值         利用input属性触发某方法来进行计算   例如：&l...
解决el-table懒加载树新增、删除、修改节点不刷新问题
qq_42383970的博客
07-01 4501
el-table懒加载树时薪新增、删除、修改节点即时刷新
el-table增加/编辑打开el-dialog内嵌套el-form，解决编辑重置表单不成功等问题
请叫我欧皇！的博客
02-22 1634
需求：在做表格的增删改查，其中新增和编辑弹窗都是同一个弹窗，之后有个重置按钮，需要用户输入的时候可以重置清空等。本文章解决如下问题1.就是在编辑数据回填后点击重置表单没有清空也没有报错2.解决清空表单和表格数据相互影响问题3.解决新增和编辑数据相互影响问题，保留了只添加数据暂存功能。
elementUi 新建和编辑dialog-input无法输入的小坑
weixin_41626938的博客
03-25 2745
<el-form-item :label="cateType === 1 ? '一级类目名称：' : '所属一级类目：'" prop="name" > <el-input v-model="deatilFrom.name" clearable maxlength="8" show-word-limit placeholder="请填写类目名称" :disabled="cateType === 2" /> </el.
vue-cli4得到el-table表格对应行数据，并用axios向后台发送ajax请求（小白记一笔~）
duduyingya的博客
03-03 2745
环境：nodejs，vue，axios，element-ui，vue-cli4 1首先解决axios跨域问题 1 安装axios: npm install axios -S 2 因为我的vue-cli是4版本的，所以先新建一个vue.config.js文件，并写下以下代码，因为vue-cli3以上的就将config文件夹内置了，我们想修改，就自己建就可以~ module.exports = {...
Vue2+ElementUI的el-table实现新增数据行与删除的功能
yuanjinshenglife的专栏
04-18 1770
Vue2+ElementUI的el-table实现新增数据行与删除的功能
创建一个自定义组件，利用 Element UI 的 el-select 和 el-table 组件来实现下拉表格。
最新发布
07-16
在 Element UI 中，`el-select` 和 `el-table` 是两个独立的组件，分别用于下拉选择和表格展示。为了实现一个结合两者功能的自定义组件（即“下拉表格”），需要利用 Vue 的自定义组件机制、插槽机制以及 Element UI...
VUE el-table中的输入框无法编辑
m0_59587347的博客
02-21 980
VUE el-table中的输入框无法编辑问题解决
vue3 el-dialog中的input无法更新的问题
JeallyBean的博客
10-24 2521
vue3开发中的el-dialog中的input输入失效，无法更新
el-table表中嵌套过多的el-input卡顿问题，优化方案
weixin_47818125的博客
12-12 4505
根据切换不同页码，切割el-table中的数据 进行展示对应的分页的数据，不在分页范围内，不做展示，从而解决了输入卡顿的问题，每次加载和修改都是加载某一个的数据，某一页的数据也就对应总的数据中的一部分。el-table表中嵌套el-input卡顿的原因：主要是由于每次修改el-input的数据 都会触发el-table中的数据变化，导致整个el-table进行重新渲染，加载dom元素，从而导致卡顿。实现方式一：根据滚动方式加载当前一屏的数据，只展示一屏的数据，不在一屏范围内的不做展示。
设置所有内容不可编辑
weixin_46183811的博客
04-12 1594
您可以使用一个变量来控制是否启用只读模式，并将该变量绑定到对话框的v-bind:close-on-click-modal和v-bind:lock-scroll属性上，以防止用户点击模态框和滚动页面。要将按钮设为不可点击状态，可以使用该组件的disabled属性。
饿了么element UI<el-dialog>弹出层</el-dialog>修改默认样式不能在<style scoped>修改
weixin_30763455的博客
07-09 1302
如果在非scoped下，修改el-dialog自动添加的DIV类名的style加上important，可以覆盖原来的width，但这样会让整个项目的样式都乱套。 如果在scoped下修改style。所有的自定义样式都无法覆盖element的样式啊，加上important也不行， <style scoped> </style> <el-dialog :title="...
应对el-table中有el-input时，数据太多卡顿问题
hahah1234111111的博客
05-20 3049
卡顿是因为输入框数据是双向绑定的，输入内容时表格数据会刷新，重新渲染表格内容导致渲染次数太多会卡顿。网上大多数解决思路是用原生input替换el-input，再加上lazy，但是el-input的很多东西就用不了了，比如，校验。解决思路：封装el-input，给输入框加上节流，在输入内容之后过200ms之后再去更改表格的数据，这样表格渲染就变少，连续输入就不卡了，外部使用error显示校验结果。
解决element dialog对话框作为子组件 不能修改props的问题
weixin_48706421的博客
01-05 597
【代码】解决element dialog对话框作为子组件 不能修改props的问题。
input不管用 vue_vue elementui input不能输入的问题
weixin_39929465的博客
12-20 683
在 vue2.6.10 版本遇到了 首次进行编辑input 可以正常输入 但是再次进入不能正常输入，是因为我对input绑定的是对象内的变量，首次进入关闭之后我进行了对象的重置直接置为空对象，这样会导致这种错误的发生；//template//data里的数据myObj：{input1:"",input2: "",}//methods中在关闭时进行重置 reset 这种重置方式 导致上面的问题r...
el-table数据不更新/父组件dialog无法关闭处理
qq_36566924的博客
07-19 426
情景:1.在el-table里面调用，当数据更新后，expand里面的数据没更新 解决:el-table加上标签:key=“tableKey” 在请求完数据后 this.tableKey=Math.random() 情景2.有时候在子组件里面封装了el-dialog，当父组件点击关闭的时候，只将子组件的dialogVisible设置为了false，而父组件没有设置。 解决 :visible.sync=“visible” visible=Math.random() ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值