element表单重置要点一个不能少

element表单重置要点一个不能少

每次表单重置都没效果，后来查了资料，发现一直少了规则绑定

element 的 Form 组件提供了表单验证的功能，需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名。

有两点需要注意:

1.必须有对应的 ref，且名字一致，表明重置哪个表单。

2.prop 设置的字段名要和 v-model 绑定的字段名一致，否则重置表单或进行自定义校验规则时不会生效。

仅使用重置功能时具体校验规则不必写，但要重置的字段一定得有对应的 prop。

每次打开表单的时候不要忘记初始化没有显示在页面上的一些数据，如集合数组等，因为其没有对应的prop所以不会被重置。

//<template>标签中
 <el-form ref="removeAddRef" :rules="removeAddRules" :model="removeAddData"  label-width="120px">
        <el-row>
         <el-col :span="12">
           <el-form-item label="员工id" prop="eid">
             <el-input v-model="removeAddData.eid" placeholder="请输入员工的工号"></el-input>
           </el-form-item>
         </el-col>
          <el-col :span="12">
            <el-form-item label="工作等级" prop="workLevel">
              <el-select v-model="removeAddData.workLevel" clearable placeholder="请选择">
                <el-option
                    v-for="item in workLevels"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="调往部门" prop="afterDepId">
              <el-select v-model="removeAddData.afterDepId" clearable placeholder="请选择">
                <el-option
                    v-for="item in departmentData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="调往岗位" prop="afterJobId">
              <el-input v-model="removeAddData.afterJobId" placeholder="请输入调往岗位名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="调职时间" prop="removeDate">
              <el-date-picker
                  v-model="removeAddData.removeDate"
                  type="date"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="调职状态" prop="remark">
              <span style="color: #99a9bf;font-size: 12px;margin-right: 2px">进行中</span>
              <el-switch
                  v-model="removeAddData.remark"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="已完成"
                  inactive-value="进行中">
              </el-switch>
              <span style="color: #99a9bf;font-size: 12px;margin-left: 2px">已完成</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="调职原因" prop="reason">
              <el-input v-model="removeAddData.reason" placeholder="请输入调职原因"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
//<script>标签中
//data里面要有绑定表单对象和规则对象
return {
      // 搜索关键字
      
      // 添加调动记录数据
      removeAddData:{
        eid:'',
        afterDepId:'',
        afterJobId:'',
        removeDate:'',
        reason:'',
        remark:'',
        workLevel:''
      },
     //规则可以不详细写
      removeAddRules:{
        eid:'',
        afterDepId:'',
        afterJobId:'',
        removeDate:'',
        reason:'',
        remark:'',
        workLevel:''
      }
    }
//方法中
 closeFun(){
 	//重置方法
      this.$refs.removeAddRef.resetFields()
    }

链接: https://blog.csdn.net/yuxiangmitu/article/details/107468773.