ElementUI 关闭对话框清空验证和发送数据完成后清除form表单

冷太阳a

于 2020-08-04 11:37:10 发布

阅读量976

点赞数

分类专栏： Vue 项目总结

本文链接：https://blog.youkuaiyun.com/A_9888/article/details/107782954

版权

项目总结同时被 2 个专栏收录

51 篇文章

订阅专栏

Vue

45 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中使用Element UI组件库的表单元素进行数据提交及表单重置的方法，包括绑定表单数据、提交事件处理及验证错误后的重置操作。

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

1.先给表单绑定 ref="formDataC" 这里的formDataC就是data里面需要传输的数据。
2.给提交（取消）按钮绑定

  <el-button type="primary" @click="submitForm('formDataC')">提交</el-button>

3.提交事件
submitForm(formName) this.$refs[formName].resetFields();

    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.formDataC);
          this.$emit("formDataC", this.formDataC);
       this.$refs[formName].resetFields();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

如果取消要清楚验证上面同样的方法基础上再加一句 this.$refs[formName].resetFields();

在这里插入图片描述