vue elementui表单清空前一次的数据

文章目录

前言
关键部分
参考代码

前言

在使用vue elementui写表单的时候，选中了表单的数据后直接关闭表单（没有点击“取消”或“保存”按钮）；但是当第二次打开表单的时候，发现选中的数据还在，这是需要清空前一次选中的数据

我写的表单是在弹框里的，效果如下

关键部分

在每一次打开弹框的时候，都清空数据：

handleOpenModal() {this.ruleForm = {college: "",xi: "",grade: "",major: "",class: "",studentstatus: "",};},

参考代码

html

  <ModalComponentname="import-batchedit"title="批量编辑"size="85%"width="700px"@opened="handleOpenModal"@close="handleCloseMOdal"><div class="cont"><el-form:model="ruleForm":rules="rules"ref="ruleForm"label-width="100px"class="demo-ruleForm"><el-form-item label="学院" prop="college"><el-selectv-model="ruleForm.college"placeholder="请选择学院"style="width: 550px"><el-option label="河北软件" value="hbsoftware"></el-option><el-option label="河北科技" value="hbtechnology"></el-option></el-select></el-form-item><el-form-item label="系" prop="xi"><el-selectv-model="ruleForm.xi"placeholder="请选择所在系"style="width: 550px"><el-option label="软件技术" value="softwaretechnology"></el-option><el-option label="数字媒体" value="digitalmedia"></el-option></el-select></el-form-item><el-form-item label="年级" prop="grade"><el-selectv-model="ruleForm.grade"placeholder="请选择所在年级"style="width: 550px"><el-option label="2021" value="twozerotwoone"></el-option><el-option label="2020" value="twozerotwozero"></el-option><el-option label="2019" value="twozeroonenine"></el-option></el-select></el-form-item><el-form-item label="专业" prop="major"><el-selectv-model="ruleForm.major"placeholder="请选择专业"style="width: 550px"><el-option label="前端开发" value="web"></el-option><el-option label="python开发" value="python"></el-option></el-select></el-form-item><el-form-item label="行政班级" prop="class"><el-selectv-model="ruleForm.class"placeholder="请选择行政班级"style="width: 550px"><el-option label="2020前端02" value="web"></el-option><el-option label="2020python开发01" value="python"></el-option></el-select></el-form-item><el-form-item label="学籍状态" prop="studentstatus"><el-selectv-model="ruleForm.studentstatus"placeholder="请选择请选择学籍状态"style="width: 550px"><el-option label="在籍" value="absentee"></el-option><el-option label="未注册" value="unregistered"></el-option><el-option label="休学" value="outofschool"></el-option><el-option label="已离校" value="leftschool"></el-option></el-select></el-form-item><el-form-item><p>* 修改为休学、已离校，则该账号不可登录启嘉网。</p></el-form-item><el-form-item><el-button @click="resetForm('ruleForm')" style="margin-left: 350px">取消</el-button><el-button type="primary" @click="submitForm('ruleForm')">保存</el-button></el-form-item></el-form></div></ModalComponent>

数据：

export default {data() {return {// 表单ruleForm: {college: "",xi: "",grade: "",major: "",class: "",studentstatus: "",},rules: {college: [{required: true,message: "请选择院系",trigger: "change",},],xi: [{required: true,message: "请选择院系",trigger: "change",},],grade: [{required: true,message: "请选择年级",trigger: "change",},],major: [{ required: true, message: "请选择专业", trigger: "change" }],class: { required: true, message: "请选择行政班级", trigger: "change" },studentstatus: {required: true,message: "请选择学籍状态",trigger: "change",},},};},};

方法：

  methods: {// 打开表单// 每次打开表单的时候都会清空数据handleOpenModal() {this.ruleForm = {college: "",xi: "",grade: "",major: "",class: "",studentstatus: "",};},// 关闭表单handleCloseMOdal() {},// 表单submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {console.log("submit!");} else {console.log("error submit!!");return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},},

vue elementui表单清空前一次的数据相关推荐

vue elementui表单的坑
今天在是一个弄elementui中哦表单的时候,vue报了一个警告解决办法: 把 alert("submit!") 改为 console.log("submit!&qu ...
Vue ElementUI 表单设计器代码生成器
界面效果体验地址 github gitee(国内) 特色: 1.支持ElementUI组件库,未来会持续添加更多组件库支持. 2.支持多达37种控件,满足各种业务场景. 3.组件配置详细,基本1:1 ...
VUE + Element-UI 表单校验input框数据已存在
基础校验方式实现 html代码 <el-form-item label="值名称:" style="width: 80%" prop="valu ...
【jQuery】在表单提交前触发事件（数据校验/执行计算等）
方式1 给form加一个id,然后在js中可以这样触发提交事件: $("#FormID").submit(function(){// do something... }); 方式二 ...
vue elementUI表单输入完成后回车触发事件@keyup.enter.native
<el-form-item label="源仓库namespace:"><el-input v-model=" ...
vue elementUI表单输入时触发事件@input
<el-input @input="func1"/>
elementui 嵌套表单验证_vue elementUI 表单嵌套验证的实例代码
一:表单一级验证 element中from组件内表单验证通过使用el-form标签,绑定model和rules属性进行表单验证简单的表单验证很简单,在prop内绑定验证属性,然后在rules对象内定 ...
Object.keys 及表单清空
Object.keys 返回一个所有元素为字符串的数组,其元素来自于从给定的object上面可直接枚举的属性.这些属性的顺序与手动遍历该对象属性时的一致. // simple array var ar ...
element-ui表单_每日UI挑战强加-登录表单（分步教程）
element-ui表单 A step by step journey to create a good design from the daily UI challenge 一步步走,从日常的UI挑 ...

vue elementui表单清空前一次的数据

文章目录

前言

关键部分

参考代码

vue elementui表单清空前一次的数据相关推荐

最新文章

热门文章