每次点击新增用户需要把上一次填写的表单数据清空
我们通常使用element-ui form表单组件时 点击表单重置按钮清空form表单数据
使用表单ref属性对象的resetFields() 方法可以重置表单
<template>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</template>
<script>
methods: {
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
</script>
vue中 this.$options.data() 可以重置vue组件中的data数据
<script>
export default {
data() {
return {
// data表单对象
form: {
input: ''
}
}
},
methods: {
// 重置表单方法
retset() {
this.form = this.$options.data().form;
}
},
}
</script>
使用Object.assign()方法,Object.assign (target, ...sources) 【target:目标对象】,【souce:源对象(可多个)】
如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性
Object.assign(this.$data.formData, this.$options.data().formData) // 重置至初始化值
遍历删除对象属性值
for( let key in obj){
delete obj[key]
}
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有