elementui 表单重置-关于iview、element-ui重置表单并消除校准的方式

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

通常在使用iview或vue重置表单时，我会习惯使用

this.$refs[formData].resetFields();

而且直接这样写是不行的，

内容必须为每个form-item添加一个prop属性，但只有与你的v-model具有相同的值才会生效

例如：

iView代码片段：

<Modal v-model="showDialog" :title="modalTitle" :mask-closable="false">
    <Form  ref="formData" :model="formData" :rules="ruleValidate" label-position="top">
        <FormItem label="姓名：" prop="name">
             <Input type="text" v-model="formData.name"/>
         </FormItem>
         <FormItem label="年龄：" prop="age">
             <Input type="text" v-model="formData.age"/>
         </FormItem>
    </Form>
    <div slot="footer">
        <Button type="text"  @click="cancel('ruleValidate')">取消</Button>
        <Button type="primary" @click="Save('ruleValidate')">保存</Button>
     </div>
</Modal>

或者

<Modal v-model="showDialog" :title="modalTitle" :mask-closable="false" @on-ok='save' @on-cancel="cancel">
    <Form  ref="formData" :model="formData" :rules="ruleValidate" label-position="top">
        <FormItem label="姓名：" prop="name">
             <Input type="text" v-model="formData.name"/>
         </FormItem>
         <FormItem label="年龄：" prop="age">
             <Input type="text" v-model="formData.age"/>
         </FormItem>
    </Form>
</Modal>

只需要在关闭弹出框的cancel方法中写入重置表单的方法即可，例如

  cancel() {
      this.$refs.formData.resetFields();
   }

事实证明，还有另一种更简单的方法来重置表单以删除校准：

<Modal v-model="showDialog" :title="modalTitle" :mask-closable="false">
    <Form v-if="showDialog" ref="formData" :model="formData" :rules="ruleValidate" label-position="top">
        <FormItem label="姓名：" prop="name">
             <Input type="text" v-model="formData.name"/>
         </FormItem>
         <FormItem label="年龄：" prop="age">
             <Input type="text" v-model="formData.age"/>
         </FormItem>
    </Form>
    <div slot="footer">
        <Button type="text"  @click="cancel('ruleValidate')">取消</Button>
        <Button type="primary" @click="Save('ruleValidate')">保存</Button>
     </div>
</Modal>

只需在From标签中添加代码v-if="showDialog"即可elementui 表单重置elementui 表单重置，关闭弹出框时showDialog=false，

再次打开弹窗就是将showDialog设置为true，这样每次打开弹窗都会生成一个新的表单。