vue的ref使用技巧☞重置表单

this.$refs.empForm.resetFields();可以重置表单

1、首先需要表单添加

ref="表单绑定对象"，ref的值一般和:model的值保持一致 

            "empForm" :rules="rules" ref="empForm" label-width="100px" class="demo-empForm">
                <el-form-item label="名称" prop="ename">
                    <el-input v-model="empForm.ename">el-input>
                el-form-item>
 
                <el-form-item label="工资" prop="sal">
                    <el-input v-model="empForm.sal">el-input>
                el-form-item>
 
                <el-form-item label="佣金" prop="comm">
                    <el-input v-model="empForm.comm">el-input>
                el-form-item>
 
                <el-form-item label="领导" prop="mqr">
                    <el-input v-model="empForm.mqr">el-input>
                el-form-item>
 
                <el-form-item label="职位" prop="job">
                    <el-input v-model="empForm.job">el-input>
                el-form-item>
 
                <el-form-item label="部门" prop="deptno">
                    <el-select v-model="empForm.deptno" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai">el-option>
                        <el-option label="区域二" value="beijing">el-option>
                    el-select>
                el-form-item>
                <el-form-item label="入职时间" required>
                    <el-col :span="11">
                        <el-form-item prop="hiredate">
                            <el-date-picker type="date" placeholder="选择日期" v-model="empForm.hiredate"
                                style="width: 100%;">el-date-picker>
                        el-form-item>
                    el-col>
                el-form-item>
            

2、新增数据时，需要表单重置为默认数据对象值，

例如默认值是 

            empForm: {
                ename: '',
                sal: '',//salary
                comm: '',//commission
                mqr: '',
                job: '',
                deptno: '',
                hiredate: ''
            },

 则添加方法内容

        empAdd() {
            this.empDialogVisible = true;
            this.empDialogTitle = '添加员工';
            //表单初始化
            this.$refs.empForm.resetFields();
        },

3、效果