<script lang="ts" setup>
import { ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
interface RuleForm {
username: string,
}
const showAddUser = ref(false)
const ruleForm = ref<FormInstance>()
const form = reactive<RuleForm>({
username:'',
})
const rules = reactive<FormRules<RuleForm>>({
username: [
{ required: true, message: '请选择用户名', trigger: 'blur'}
],
})
const addCancel = (formEl: FormInstance | undefined) => {
if(!formEl) return;
showAddUser.value = false;
formEl.resetFields();
}
</script>
<el-dialog v-model="showAddUser" title="Shipping address">
<el-form :model="form" ref="ruleForm" :rules="rules">
<el-form-item label="用户名" prop="username">
<el-input v-model="ruleForm.username" />
</el-form-item>
</el-form>
<el-button @click="addCancel(ruleForm)">取消</el-button>
</el-dialog>
Vue3 Element-Plus 重置表单项
于 2023-08-07 15:53:55 首次发布