页面效果
每次点击新增用户需要把上一次填写的表单数据清空
方法一
我们通常使用element-ui form表单组件时 点击表单重置按钮清空form表单数据
使用表单ref属性对象的resetFields() 方法可以重置表单
代码语言：javascript复制
<template>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</template>
<script>
methods: {
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
</script>方法二
vue中 this.$options.data() 可以重置vue组件中的data数据
代码语言：javascript复制<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：源对象（可多个）】
如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性
代码语言：javascript复制Object.assign(this.$data.formData, this.$options.data().formData) // 重置至初始化值方法四
遍历删除对象属性值
代码语言：javascript复制for( let key in obj){
delete obj[key]
}
