精华内容
下载资源
问答
  • 主要介绍了Vue 一键清空表单的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue . form表单清空的方法

    万次阅读 2019-06-28 16:35:10
    this.$refs.XXX.resetFields()

    this.$refs.XXX.resetFields()

    展开全文
  • 主要介绍了vue+ElementUI 关闭对话框清空验证,清除form表单的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue清空form表单数据踩坑

    万次阅读 2019-06-21 16:05:37
    关闭弹出框时,想要清空里面的form表单数据 this.$refs['form'].resetFields() 但是再次点开时发现只清空了一部分,检查后发现在写form-item时漏掉了prop,如下: <el-form-item label="主题描述" prop=...

    关闭弹出框时,想要清空里面的form表单数据

    this.$refs['form'].resetFields()
    

    但是再次点开时发现只清空了一部分,检查后发现在写form-item时漏掉了prop,如下:

    <el-form-item label="主题描述" prop="themeDesc" class="input-item">
    
    展开全文
  • ant design vue中关于表单清空的问题

    千次阅读 2021-01-12 11:07:49
    1.在ant design vue中使用表单首先要进行form注册,具体看官方文档解释。 2.当进行清空时,使用文档提供的resetFileds()方法,此操作必须在dom节点更新之后执行,所以需要加上this.$nextTick(()=>{})

    1.在ant design vue中使用表单首先要进行form注册,具体看官方文档解释。在这里插入图片描述
    2.当进行清空时,使用文档提供的resetFileds()方法,此操作必须在dom节点更新之后执行,所以需要加上this.$nextTick(()=>{})
    在这里插入图片描述

    展开全文
  • ———————————————— 版权声明:本文为CSDN博主「别样红。」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。...form表单的使用 form表单之获取表单的数据 创建表单 通过an...

    form表单的使用

    form表单之获取表单的数据

    创建表单

    通过ant-design-vue去获取表单的数据是使用v-decorator的方式去给每个项去注册,这样才能通过组件去拉取表单的数据,同时对必填项做校验;

    <template>
      <a-form @submit="handleOk" :form="form">
        // :form="form" 必须优先注册
        <!-- 客户姓名 -->
        <a-form-item
            :labelCol="labelCol" // 排列样式
            :wrapperCol="wrapperCol"
            label='客户姓名:'
          >
          <a-input
            v-decorator="[
              'name', // 给表单赋值或拉取表单时,该input对应的key
              {rules: [{ required: true, message: '请输入客户名称!' }]}
            ]"
            placeholder="请输入客户名称"/>
        </a-form-item>
      </a-form>
    </template>
    
    export default {
      data() {
        return {
          form: this.$form.createForm(this), // 只有这样注册后,才能通过表单拉取数据
        }
      }
    }
    

    拉取表单数据的方法

    通过validateFields的方法,能够校验必填项是否有值,若无,则页面会给出警告!

    this.form.validateFields((err, values) => {
      if (err) {
        // 这里做逻辑处理
        console.log(values) // { name: '' }
      }
    }
    

    清空表单的方法

    执行this.form.resetFields(),则会将表单清空。

    给表单赋值

    值得一提的是,setFieldsValue只有通过这种方式给表单赋值,拉取表单的时候才能拉取到值,其他设置默认值的方式,拉取表单时都无法获取到默认值

    this.form.setFieldsValue({
       name: '设置值'
     })
    

    给表单中添加自定义校验

    现在给表单添加自定义校验的方式,是从你开始输入时就在校验,讨厌的警告一直存在,直到你输入完整才会消失,个人觉得这种方式不太友好!

    <a-form-item
      v-bind="formItemLayout"
      label="E-mail"
    >
      <a-input
        v-decorator="[
          'email',
          {
            rules: [{
              type: 'email', message: 'The input is not valid E-mail!',
            }, {
              required: true, message: 'Please input your E-mail!',
            }]
          }
        ]"
      />
    </a-form-item>
    
    • 推荐使用下面的方式做自定义校验,当输入框失去焦点后再去校验是否正确
    • 这种方法的思路是,
      • 当输入框失去焦点时,校验是否为空同时是否匹配正则
      • 给该单个输入框设置错误信息,并在页面给出警告。
    <a-form-item
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      label='手机:'
    >
    <a-input
      type="number"
      v-decorator="[
        'phone',
        {
          rules: [
            { required: false, message: '请输入手机号码!' },]
        },
      ]"
      @blur="validatePhoneBlur"
      placeholder='请输入手机号码' />
    </a-form-item>
    
    // 校验事件
    validatePhoneBlur(e) {
      const validatePhoneReg = /^1\d{10}$/
      if (e.target.value && !validatePhoneReg.test(e.target.value)) {
        const arr = [{
          message: '您输入的手机格式不正确!',
          field: 'phone',
        }]
        this.form.setFields({ phone: { value: e.target.value, errors: arr } })
      }
    }
    

    ————————————————
    版权声明:本文为CSDN博主「别样红。」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/weixin_44051815/article/details/88305722

    展开全文
  • vue清空form

    千次阅读 2020-03-13 13:25:34
    当弹层form时,提交form要将form 清空 1、初始化数据 form: { userName: '', password: '' } 2、在created中深拷贝一份数据: created () { this.defaultForm = JSON.parse(JSON.stringify(this.form)) } ...
  • ant-design vue中form表单重置问题

    千次阅读 2021-04-12 10:07:23
    场景:一个组件两个弹窗,即新增、编辑两个弹窗,两个表单 需求:点击新增按钮,出现新增弹窗,填写表单,提交成功,弹窗消失。再次点击新增按钮,弹窗出现,弹窗里的值清空(重置) 问题:再次点击新增按钮,出现上...
  • vue清空表单常用方法

    千次阅读 2020-04-30 09:47:52
    前言 this.$refs['form'].resetFields() 常规清空方式 this.form = {} 当表单深度拷贝的时候适用: this.form = JSON.parse(JSON.stringify(row))
  • vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据 在项目做联系人的添加和编辑功能,点击父级页面的添加和编辑按钮,用的是同一个表单弹窗,数据添加和编辑用同一个弹窗,没有在弹窗使用v-if,性能不是...
  • antd-vue 清除form表单里input值 // 清除input值 this.form.setFieldsValue({'inputCode':""})//inputCode就是表单里Input的值,第二个""为所需要空值
  • . 在线预览 git subtree push --prefix=dist origin gh-pages npm i zx-lib3 -S
  • this.$set(this.form, 'county', '') 使用这段代码即可解决问题
  • Vue清空表单数据

    千次阅读 2021-01-22 09:31:00
    表单添加ref属性 表单项el-form-item要添加prop属性,prop属性需要与input框绑定数据的最后名称一致,如v-model=“form.username”, prop则应该为 prop=“username” 通过this.$refs.xxx.resetFields(); 此处xxx为...
  • 1.直接把表单对象置空; this.form={ name:"小明", age:120 } //直接清空 this.form={ name:", age:0 } 2.使用 this.$options.data() this.form={ name:"小明", age:120 } //调用方法 this.form =this....
  • 今天小编就为大家分享一篇vue实现重置表单信息为空的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • ant-design-vue表单from清空,设置值

    千次阅读 2020-09-15 09:25:31
    err) {} } ant-design-vue表单from清空内容 //清空表单的内容,如果不清空,会存在之前填的内容 this.form.resetFields(); ant-design-vue表单from设置对应值 //给表单中某个内容设置对应值 this.form....
  • vue中提交表单后如何清空

    千次阅读 2018-06-12 14:45:00
    只需要在提交方法里写上this.form={brand_right:0}即可。 转载于:https://www.cnblogs.com/YMoonwind/p/9172952.html
  • 在大型后台项目开发表单是必不可少的,各种校验规则对应的错误提示,在某个选择条件下切换后,发现相关联的错误提示信息还存在,这样看起来不是很友好,自测过程发现这样子的问题,参照API,写的很清楚 ...
  • vue清空表单

    2021-03-28 12:54:08
    1 报错:[Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘resetFields’ of undefined” 2 原因: 3 解决方法 其中ref是表单,prop是表单中的元素
  • vue表单清空方法

    千次阅读 2019-07-20 11:01:39
    vue表单清空方法 调用(releaseForm为表单名字) this.resetForm('releaseForm'); 或 @click="onSubmit('reportForm')" 方法 resetForm(formName) { //初始化表单 this.$nextTick(()=>{ this.$refs[formName]....
  • vue 表单清空报错

    2020-06-14 20:29:35
    vue 表单清空报错 Cannot read property ‘resetFields’ of undefined this.$refs[‘ruleForm1’].resetFields(); 1、我们需要为每个form-item加上prop属性,要不然无法清空(大部分的问题就是出在这) 2、...
  • vue清空表单信息

    千次阅读 2020-03-10 17:21:28
    如果使用的是饿了么的form表单,可以直接采用提供的表单重置方法 <el-form :model="form" :rules="rules" ref="form1"> ref绑定对应表单 使用方法; this.$refs.form1.resetFields() 2.深拷贝初始数据,再进行...
  • 但是当第二次打开表单的时候,发现选中的数据还在,这是需要清空前一次选中的数据 我写的表单是在弹框里的,效果如下 关键部分 在每一次打开弹框的时候,都清空数据: handleOpenModal() { this.ruleForm = { ...
  • vue-element-ui form中有个清空表单的方法,即假如给表单一个ref='form', 则清空表单的方法为this.$refs['form'].resetFields() 可当我在dialog组件中用这个方法的时候,这就出现问题了,居然清空不了~~~~~ 问题...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,057
精华内容 1,222
关键字:

vue中form表单清空

vue 订阅