(vue.js)element ui 表單重置 this.$refs[formName].resetFields()不執(zhí)行

我在一個(gè)彈框里有一個(gè)form表單，用于增加頁面內(nèi)容。點(diǎn)擊取消按鈕本身form里的內(nèi)容都清空才對(duì)。使用了this.$refs['addServiceForm'].resetFields()不起作用。console出來
console.log(this.$refs['addServiceForm'].resetFields());居然是undefined。

<el-dialog
          title="新建服務(wù)"
          :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">簡(jiǎn)稱</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="請(qǐng)選擇類型" @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());
    }