iView 表单重置

在Vue里面，想重置iView的表单，需要在FormItem中指定prop属性，FormItem包含的控件需要双向绑定表单Model对象，同时表单Model对象也要因应控件类型，作适当的声明与初始化。这几个条件，缺一不可。以往使用原始的js，只需将表单对象执行一下reset()方法就可以了，现在搞到这么复杂。

示例如下：

<Form ref="form1" :model="form1" inline :label-width="90"><Row><Col span="6"><FormItem label="预报日期" prop="ybdate"><DatePickertype="daterange"v-model="form1.ybdate":start-date="new Date()"placement="bottom-start"placeholder="请指定日期范围"></DatePicker></FormItem></Col><Col span="10" class="padding-left"><FormItem label="预警等级" prop="yblevel"><CheckboxGroup v-model="form1.yblevel"><Checkbox v-for="item in levels" :label="item" :value="item" :key="item"></Checkbox></CheckboxGroup></FormItem></Col></Row><Row type="flex" justify="end"><Col span="16"><Button type="primary" @click="add">新增</Button></Col><Col span="8" class="right-align"><Button type="primary" @click="search">查询</Button><Button @click="reset('form1')">重置</Button></Col></Row>
</Form>

let levels = ['一级','二级','三级','四级','五级'
]
export default {data () {return {levels: levels,form1: {ybdate: '',yblevel: [] // 对应了CheckBoxGroup}}},methods: {reset (formName) {this.$refs[formName].resetFields()}}
}

原本一个很简单的功能，却大费周折，在网上寻寻觅觅，全部都只说了一点点，支离破碎，基本上没有什么帮助。幸亏iView官网有比较完整的例子，还可以运行：

表单验证
https://www.iviewui.com/components/form#BDYZ

iView 表单重置相关推荐

iview表单重置以及重置验证信息
表单内容添加一般都是在弹出框中进行编辑.修改.新增的如以下这段编辑代码: <Modal :mask-closable="false&quo ...
ElementUI中el-form实现表单重置以及将方法抽出为全局方法
场景使用el-form时,点击重置按钮或者取消按钮时会实现表单重置效果. 那么el-form怎样实现表单重置,如果在多个页面需要用到重置,怎样将此方法抽出为全局的方法,在需要用到的地方直接引用. 注 ...
工作177：表单重置项目处理
<template><el-dialog title="新建账号" :visible.sync="dialogF ...
iview表单验证不生效问题注意点
按照iview官网介绍写的form表单验证,但是无论填写与否都不进行校验,找了很久的原因,突然才发现一个关键的地方,一定要加props!!! https://blog.csdn.net/xuaner8 ...
iview表单校验上传图片成功后，提示文字不消失
最近做的项目中有直播和课程后台管理模块,遇到一个bug,其中有个功能是上传直播图片和直播附件,而且都是必填项.用的框架是vue+iview,用Form表单验证,对必填项做校验.当不填写时点提交会出现红 ...
ElementUI实现el-form表单重置功能按钮
目录业务场景: 效果演示: 业务场景: 使用el-form时,点击重置按钮或者取消按钮时会实现表单重置效果. 重置功能按钮功能实现详细步骤: 第一:首先给el-form添加ref属性. <el ...
【HTML】form表单重置、清空方法记录
form表单重置.清空方法记录 myform 是 form 的 id 属性值调用 reset()方法 function fomrReset() {document.getElementById(&q ...
elementUI form表单重置问题
elementUI form表单重置问题问题如果修改了data里的表单form默认值,那么重置以后就是你修改以后的值,而不是data里的值了所以this.$refs.ruleForm.resetF ...
ElementUI 之el-form表单重置功能按钮
业务场景: 使用el-form时,点击重置按钮或者取消按钮时会实现表单重置效果. 重置功能按钮功能实现详细步骤: 第一:首先给el-form添加ref属性. <el-form :inline=& ...

iView 表单重置

iView 表单重置相关推荐

最新文章

热门文章