Element Plus - Form 的 resetField 方法观察记录

Form 的 resetField 方法观察记录

Form 的 resetField 方法用于对该表单项进行重置，将其值重置为初始值并移除校验结果

vue 复制代码

<template>
    <el-form :model="formData" :rules="rules" ref="formRef">
        <el-form-item label="用户名" prop="username">
            <el-input v-model="formData.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input v-model="formData.password" placeholder="请输入密码" type="password"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="formData.sex">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="留言" prop="message">
            <el-input v-model="formData.message" placeholder="请输入留言"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="resetForm">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts">
export default {
    name: "MyTest",
};
</script>
<script lang="ts" setup>
const formData = ref({
    username: "",
    password: "",
    sex: 1,
    message: "hello",
});
const rules = {
    username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
};
const formRef = ref();

const resetForm = () => {
    console.log("重置前：", formData.value);
    formRef.value.resetFields();
    console.log("重置后：", formData.value);
};
</script>

<style scoped lang="sass"></style>

复制代码

# 输出结果

重置前： Proxy(Object) {username: '123', password: '123', sex: 1, message: 'hello world'}
重置后： Proxy(Object) {username: '', password: '', sex: 1, message: 'hello'}