vue只提交表单修改的数据

最新推荐文章于 2022-11-21 18:09:29 发布
VIP文章 最新推荐文章于 2022-11-21 18:09:29 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： vue elementui vue提交更改数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yjh525096890/article/details/119818154
版权

vue表单提交只提交已修改数据
公司新需求只提交表单中已修改的数据，前思后想，因为后台返回的数据是没有数据的字段是没有返回的，所以难题就出来了终于打磨出来了
直接上代码
1.区分原始数据和表单数据
在这里插入图片描述

2.比较差异的方法，将原始数据与表单数据进行对比，然后推到一个新的全局对象里
（注：声明两个新数组，循环表单对象，和原始对象并推到数组里，合并数组并对数组进行去重，然后循环去重后的数组，进行属性对比，如果不一样或者undefined就循环到新的对象里）

diffFormData() {
   
const oldArr= [
最低0.47元/天 解锁文章
爱健身的程序猿JH
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue对表单的增删改查（包含图片）
~~
05-05 2439
目录 效果图： ​客户端 views/userManage/index.vue views/userManage/userManageDialog utils/alioss.js utils/index.js utils/request.js router.js main.js vue.config.js 服务端 models/User.js routes/user.js db.js app.js gitee地址：https://gitee.com/LiDaJiang/g..
使用Vue生成动态表单
01-19
开需求会了，产品说这次需求的表单比较多，目前有18个，后期的表单可能会有增加、修改。我作为这次的前端开发，看到这样的需求，心里知道要这样搞不得把自己累死，首先表单居多，还会有变更，以后维护起来也让人心力憔悴。 于是我提议做动态表单，做一个表单的配置系统，在系统里配置表单类型、表单得字段、以及对表单得管理。后来重新评审了需求，系统部分由后端自行开发，我要处理的部分是动态生成表单，展现提交的表单，以及对表单的处理情况。 数据接口设计 表单类型的接口就不用说了，这个比较简单。我跟后端约定了一个预备创建工单接口，这个接口是后端告知前端，需要生成一个什么样的表单。 预备创建表单接口（其中字段解释说明）：
vue实现重置表单信息为空的方法
10-17
今天小编就为大家分享一篇vue实现重置表单信息为空的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
android防止提交事件时触发多个表单中的按钮
01-04
单击拍照 button ，执行该函数 getPhoto() ，窗体执行的函数 funcSubmit() ng-submit 自动。 什么会需要更改，以防止这种情况发生？它执行的功能只有 getPhoto() 而无需运行 ng-submit 的形式。 Ps.： 这段代码是应用程序的一部分 android 移动，用离子框架开发 <ion title=OS> <form ng-submit = funcSubmit()> <ion class=has-header> <ion> <ion>
vue中实现上传文件给后台实例详解
12-01
FormData 对象的使用： 1.用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成 一个queryString 2. 异步上传二进制文件。 （ps：说白了就是不使用form表单实现form表单提交数据或文件，如果还是不懂，请自行百度） 实现过程 1.使用type类型为file的input框实现选择文件(顺便记录一下修改input框的默认样式) 2.修改input框的默认样式 3.通过选择文件拿到数据 4.请求接口 以上就是本次关于vue中实现上传文件给后台的全部实例内容，感谢大家对软件开发网的支持。
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
主要介绍了vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中表单修改只提交被更新的字段
风如也的博客
08-11 2058
解析：开发中经常遇到编辑表单，如果需要在编辑时，只传递用户更新了的字段给后台，而不是把整个表单都提交给后台的话，如何解决？ 思路： 得到编辑表单之前的原始数据存入如：rawData 中，注意将数据解构 更新表单时，提交之前将表单数据ruleForm 和 原始数据进行比较 得出差异数据，将差异数据提交给表单即可 代码实现 部分核心代码 data() { return { rawData: {}, diffData: {} } }, methods: { open(type.
Vue 表单只提交修改过的部分
莫不静好
06-04 3597
文章目录1、页面效果2、实现1.修改回显2.声明，method3.提交方法时调用 1、页面效果 2、实现 1.修改回显 注意： 在this.reset() 方法中每次清空 diffData this.diffData = {}; 2.声明，method data() { return { …… 之前的数据不变 form: null, //记录设备原始数据 diffData: null, //记录修改过的值 } }, /
Vue只提交表单中被修改的部分
wxl1390的博客
09-11 1975
需求 在提交表单使用http的put请求进行数据更新时，只提交表单中被修改的数据，而不是提交整个表单 解决 获取表单数据时clone一份作为原始数据rawData 在提交表单前将表单数据 formData 和 rawData 的数据进行比较 将差异存放到新的对象 diffData 中，在提交表单时提交就行了 实现（部分代码） template中的代码 <template> <el-form ref="formRef" :model="form"> <el-for
form表单内容编辑，只提交已经修改的部分,未修改的部分不提交
逆水行舟，不进则退
07-13 2243
更新接口做了名称重复校验，只修改状态，会校验名称重复，只能提交修改的字段和id 更新内容 封装对比函数 function diffDataForm(newData, oldData) { let result = {} // 报错修改的字段内容 Object.keys(oldData).forEach(key => { if (oldData[key] !== newData[key]) { result[key] = newData[k.
vue实现表单未编辑或未保存离开弹窗提示功能
01-19
说明 UI组件是使用 Quasar Framework 。 最近做一个表单弹出框，表单保存提交，但是，产品提出，用户不保存，而关闭弹出框时，要给出一个弹窗提示。这个功能，可以用watch监听表单数据。当数据表单发生变化，用户点击了关闭按钮，则根据监听结果来判断用户输入或编辑了数据，进而出现弹窗提示，让用户选择是否离开；当数据没发生变化，则不必提示。 确认离开提示框 实现效果 先实现一个确认离开提示框，效果如下：   实现代码： <template> <div> <q persistent=true v-model=alert> <q-card style=
【java_web_vue】修改 删除 （自用）
qq_42765493的博客
04-14 1271
修改 修改功能比添加多一个选择数据的功能 要确定到某一条数据，再对他进行修改 在后面添加 修改 删除 摁钮 还有选择框 通过元素的点选，就是直接在数据上 点击 添加属性 higlight-current-row 配置事件 事件名冲突，好像和分页的冲突，自己修改一下 为什么没有使用 setCurrent(row) 因为这个是干这个的 之后由current-change事件来管理选中时触发的事件，它会传入currentRow，oldCurrentRow。 1、我知道 currentRo
form表单内容编辑时 只提交已经修改的部分,未修改的部分不提交
zhaoletf的博客
07-10 3541
在工作中我们会遇到这样的需求,就是在内容编辑的时候提供修改内容的log日志,这个时候就需要我们在提交的时候,只提交内容修改的部分,而不修改的部分不需要提交.这样其实很简单,就是需要我把原始的数据放到一个数组或者对象里面,(这里需要注意一点,就是不要直接用等于 = , 这样会把原始数据浅拷贝到你存储的数组或对象里面,可能存在你编辑了内容之后,你存贮的原始数据也会被修改,这个时候你需要深拷贝数据就可以了).然后在通过for循环遍历对比即可. <!DOCTYPE html> <html lang
ts+vue3 elementUI表单提交编辑
淡淡的芦苇的博客
03-01 2551
需求： 因为有些有唯一性校验的字段，如果没被编辑并且传了；后端更新时会失败；所以只传需要变更的字段。 在提交表单使用http的put请求进行数据更新时，只提交表单中被修改的数据，而不是提交整个表单 分析： 获取表单数据时clone一份作为原始数据rawData 在提交表单前将表单数据 formData 和 rawData 的数据进行比较 将差异存放到新的对象 diffData 中，在提交表单时提交就行了 <!-- 编辑模态框 --> <el-dialog tit
web前端表单提交时只提交变更的数据，数据为集合形式，数据存在子表，对比找出变更的数据
weixin_50805614的博客
11-16 487
web提交表单时只提交变更的数据，数据为集合
传参只传修改的数据
陈志航1995的博客
02-11 802
本方法适用于 在修改页面中 本次接口提交的参数 只传入本次改变的数据的时候使用。 //检测是否有修改的数据 checkedUpdateData(oSrcData,newData){ if(oSrcData instanceof Object){ let tmpSrcData={} for(let key in oSrcData){ if(oSrcData[key] instanceof Objec...
vue 点击保存时判断表单数据是否有变化，有变化则可提交
Luminary7的博客
11-21 1884
vue 点击保存时判断表单数据是否有变化，有变化则可提交
elmentui 权限树部分提交
最新发布
06-08
如果您使用 ElementUI 权限树组件，您可以在提交表单时获取已选中的节点数据，然后将其作为表单数据提交给后端进行保存或更新。可以通过以下步骤来实现： 1. 在模板中使用 ElementUI 的权限树组件，通过 v-model 绑定已选中的节点数据： ```html <el-tree :data="treeData" show-checkbox v-model="checkedNodes"></el-tree> ``` 2. 在 Vue 组件中定义 checkedNodes 数据，并在提交表单时获取它的值： ```javascript data() { return { treeData: [], // 权限树数据 checkedNodes: [], // 已选中节点数据 form: {}, // 表单数据 }; }, methods: { onSubmit() { // 获取已选中的节点数据 const checkedKeys = this.$refs.tree.getCheckedKeys(); this.checkedNodes = checkedKeys.map(key => this.$refs.tree.getNode(key).data); // 将 checkedNodes 作为表单数据提交给后端 axios.post('/api/submit', { ...this.form, checkedNodes: this.checkedNodes, }).then(response => { // 处理响应结果 }).catch(error => { // 处理错误 }); }, }, ``` 在这个例子中，我们使用了 axios 库来发送 POST 请求，并将 checkedNodes 数据作为表单数据的一部分提交给后端。请注意，这里假设后端已经能够正确地接收和处理这个数据。如果需要，您可能需要根据实际情况进行修改。 希望这个回答能够帮助到您！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值