vue3 및 elementPlus 재설정에서 재설정 양식 문제를 해결하는 방법

vue3 elementPlus 재설정 재설정 양식

양식에 ref 속성을 추가해야 합니다

필드에 prop 속성을 추가해야 합니다

<template>
  <div class="main">
    <el-form ref="resetFormData" :model="formInline">
      <el-form-item label="姓名" prop="customerName">
        <el-input
          v-model="formInline.customerName"
          placeholder="请输入姓名"
        ></el-input>
      </el-form-item>
      <el-button type="warning" @click="resetForm">重置</el-button>
    </el-form>
  </div>
</template>

<script>
import { defineComponent, reactive, ref } from "vue";
export default defineComponent({
  setup() {
    const resetFormData = ref(null);
    const formInline = reactive({});
    
    const resetForm = () => {
      resetFormData.value.resetFields();
    };
    return {
      resetForm,
      resetFormData,
      formInline,
    };
  },
});
</script>

vue3 elementPlus 함정

양식 재설정 버튼 재설정양식이 유효하지 않습니다

프로젝트에서, 과거에 경험상 리셋 버튼을 작성했는데, 기본 리셋 버튼으로 교체해도 제대로 작동하지 않는 것으로 나타났습니다. 나중에 여전히 버전 마이그레이션 문제인 것으로 밝혀졌습니다.

vue2.0과 vue3.0의 구문이 다릅니다.main.js

// Vue2.0 
Vue.prototype.resetForm = resetForm;
 
//Vue3.0 
let app = createApp(App);
 
//... 
app.config.globalProperties.resetForm = resetForm;

에 Resetform 함수를 도입할 때 구문 오류가 있습니다.

위 내용은 vue3 및 elementPlus 재설정에서 재설정 양식 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!