vue3 + elementPlus reset重置表单

表单需加上ref属性
字段需加上prop属性
vue3 + elementPlus reset重置表单_第1张图片

<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>

你可能感兴趣的