(vue.js)element ui 表单重置 this.$refs[formName].resetFields()不执行

Question

我在一个弹框里有一个form表单，用于增加页面内容。点击取消按钮本身form里的内容都清空才对。使用了this.$refs['addServiceForm'].resetFields()不起作用。console出来
console.log(this.$refs['addServiceForm'].resetFields());居然是undefined。

<el-dialog
          title="新建服务"
          :visible.sync="addServiceDialogVisible"
          width="400px">
          <div>
            <el-form ref="addServiceForm">
              <table class="base_table">
                <tbody class="table_body1">
                  <tr>
                    <td width="15%" class="text_align_right">名称</td>
                    <td>
                      <el-input v-model="serviceName"></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td class="text_align_right">简称</td>
                    <td>
                      <el-input v-model="serviceShorterName"></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td class="text_align_right">类型</td>
                    <td>
                      <el-select v-model="serviceType" placeholder="请选择类型" @change="selectChange" style="width:100%">
                        <el-option
                          v-for="item in serviceTypeOptions1"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </td>
                  </tr>
                  <tr>
                    <td class="text_align_right">备注</td>
                    <td>
                        <el-input type="textarea" :rows="2" v-model="serviceRemarks"></el-input>
                        <!--加上resize="none"属性就不可以缩放了-->
                    </td>
                  </tr>
                </tbody>
              </table>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer modalCenter">
            <el-button type="primary" @click="addNewService">确 定</el-button>
            <el-button @click="cancleAddService">取 消</el-button>
          </span>
        </el-dialog>

cancleAddService(){
      this.resetForm('addServiceForm');
      // this.serviceName='';
      // this.serviceShorterName='';
      // this.serviceRemarks='';
      // this.serviceType='';
      this.addServiceDialogVisible=false;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      console.log("form名称:"+this.$refs['addServiceForm'].resetFields());
    }

Answer 1

el-form需要接收一个model，并且需要配合el-form-item一起使用，并且在el-form-item上绑定prop属性，resetField方法才能好使。

<el-form :model="addServiceData" ref="addServiceForm">
    <el-form-item label="手机号" prop="mobile">
       <el-input v-model="data.mobile" placeholder="请输入手机号码"></el-input>
     </el-form-item>
</el-form>

并且addServiceData应该是个对象，定义在data里面，类似这样

data(){
    return {
        addServiceData: {
            mobile: ''
        }
    }
}

Answer 2

外部重置这样用

this.$nextTick(() => {
   this.$refs['ruleForm'].resetFields()
})

Answer 3

1. 使用 this.$refs 而不是 this.$ref
2. 配合使用 this.$nextTick(() => {})
3. el-form 中的 model / ref 以及 el-form-item 中的 prop 再检查一遍吧

---

2020年6月30日 10:55:49