vue3-对Element Plus中的Form表单进行resetFields重置

vue3-对Element Plus中的Form表单进行resetFields重置

官方文档


参考官网的示范代码：

<template>
  <el-form
    ref="formRef"
    :model="numberValidateForm"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item
      label="age"
      prop="age"
      :rules="[
        { required: true, message: 'age is required' },
        { type: 'number', message: 'age must be a number' },
      ]"
    >
      <el-input
        v-model.number="numberValidateForm.age"
        type="text"
        autocomplete="off"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(formRef)">Submit</el-button>
      <el-button @click="resetForm(formRef)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'

const formRef = ref<FormInstance>()

const numberValidateForm = reactive({
  age: '',
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

项目中写的代码

<template>
    <el-form :model="form" ref="formRef">
        <el-form-item label="姓名：" :label-width="formLabelWidth" prop='name'>
            <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="年龄：" :label-width="formLabelWidth" prop='age'>
            <el-input v-model="form.age" autocomplete="off" />
        </el-form-item>
        <el-form-item label="性别：" :label-width="formLabelWidth" prop='gender'>
            <el-select v-model="form.gender" placeholder="请选择性别">
                <el-option v-for="item in genderOptions" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="图片：" :label-width="formLabelWidth" prop='imagePath'>
            <el-upload v-model="form.imagePath" class="avatar-uploader"
                action="https://7101v4b133.zicp.fun/images/uploadImages" :show-file-list="false" :on-success="handleUpImage"
                list-type="picture" accept="image/*">
                <!-- 如果图片列表里面已经提交了图片地址则显示已提交的图片 -->
                <img v-if="form.imagePath" :src="form.imagePath" class="avatar" />
                <!-- 如果图片列表里面没有图片地址则显示显示上传按钮 -->
                <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                </el-icon>
            </el-upload>
        </el-form-item>
        <div class="dialog-footer">
            <el-button @click="resetForm(formRef)">取消</el-button>
            <el-button type="primary" @click="addStudentsInfo(formRef)">
                确认
            </el-button>
        </div>
    </el-form>
</template>

<script setup lang="ts">

import api from '@/assets/api';
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { StudentInfoT } from '@/type'; 

const formLabelWidth = '140px'
const formRef = ref<FormInstance>()
// 新增学生数据
const form = reactive({
    name: '',
    age: '',
    gender: '',
    imagePath: '',
} as StudentInfoT);
// 选择性别的选择数据
const genderOptions = [
    {
        value: '男',
        label: '男',
    },
    {
        value: '女',
        label: '女',
    }
]
// 上传图片
const handleUpImage = (res: any) => {
    form.imagePath = res.data[0]
}
//=============

// 取消新增
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const addStudents = async (params: any) => {
    const result = await api.addStudents(params);
    if (result.code === 1) {
        ElMessage({
            message: '新增成功！',
            type: 'success',
        })
    } else {
        ElMessage.error('新增失败！')
    }
}
const addStudentsInfo = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            addStudents(form)
            formEl.resetFields()
        } else {
            console.log('error submit!')
            formEl.resetFields()
            return false
        }
    })
}

</script>

<style scoped>
.avatar-uploader .avatar {
    width: 140px;
    height: 140px;
    display: block;
}

.el-form {
    margin: 10px auto;
    width: 600px;
}

.el-form-item {
    display: flex;
    justify-content: center;
}

.el-input {
    width: 400px;
}

.dialog-footer {
    margin: 40px auto;
    margin-left: 140px;
}

.dialog-footer button:first-child {
    margin-right: 80px;
}

.avatar-uploader .avatar {
    width: 140px;
    height: 140px;
    display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 140px;
    height: 140px;
    text-align: center;
}
</style>