使用element-ui表单提交值为空的问题

最新推荐文章于 2023-12-27 16:26:29 发布

One Life One Love

最新推荐文章于 2023-12-27 16:26:29 发布

阅读量8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： element

本文链接：https://blog.youkuaiyun.com/ZHANGWEI19930118/article/details/85112279

前端专栏收录该内容

10 篇文章

订阅专栏

本文详述了使用Element UI的form组件时遇到的表单提交参数为空的问题及解决方案。作者发现，由于异步请求与表单重置事件的执行顺序不当，导致参数在请求完成前被清空。通过调整代码逻辑，将表单重置操作置于请求成功或失败的回调中，有效避免了该问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

再用element的form表单提交时参数一直为空，找了半天最后发现是因为在提交表单后有一个还原表单的事件，这个事件写道了提交请求的方法外面，但是因为是ajax异步提交导致请求未完成参数就置空了，再此记录一下：

 // 保存按钮
      handleSave(updateForm){
        var _this= this;
        const set = this.$refs['updateForm'];
        set.validate((valid) => {
          if (valid) {
            updataCondition(_this.updateForm).then(response => {
                if(response.rel){
                    this.$notify({
                      title: '成功',
                      message: '审核成功！',
                      type: 'success',
                      duration:2000
                    });
                    //将表单值初始化
                    this.$refs['updateForm'].resetFields();
                     // 给父页面传递信息，关闭弹窗
                    PubSub.publish('dialogVisible',{flag:"check",refresh:true});
                }else{
                    this.$notify.error({
                      title: '错误',
                      message: '审核失败！',
                      duration:2000
                    });
                    //将表单值初始化
                    this.$refs['updateForm'].resetFields();
                     // 给父页面传递信息，关闭弹窗
                    PubSub.publish('dialogVisible',{flag:"check",refresh:false});
                }
            });
            this.isAuditTime = false;
          } else {
            return false;
          }
        });
        
      },

主要是下面这一句，这一句要写在请求成功或失败中就行了：

 //将表单值初始化
 this.$refs['updateForm'].resetFields();