页面效果

每次点击新增用户需要把上一次填写的表单数据清空

方法一

我们通常使用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;