教师信息修改页面 - Vue Element Plus 表单示例

<template>
    <div style='padding: 0 250px 0 250px ;'>
        <el-form ref='ruleFormRef' :model='ruleForm' status-icon :rules='rules' label-width='120px' class='demo-ruleForm'>
            <el-form-item label='教师id' prop='tid'>
                <el-input style='width: 600px;margin: 5px 0;' v-model='ruleForm.tid' autocomplete='off' :disabled='true'/>
            </el-form-item>
            <el-form-item label='教师名' prop='tname'>
                <el-input style='width: 600px;margin: 5px 0;' v-model='ruleForm.tname' autocomplete='off' :disabled='false' />
            </el-form-item>
            <el-form-item label='院名' prop='departmentName'>
                <el-input style='width: 600px;margin: 5px 0;' v-model='ruleForm.departmentName' autocomplete='off' :disabled='true' />
            </el-form-item>
            <el-form-item label='职位' prop='tsId'>
                <el-input style='width: 600px;margin: 5px 0;' v-model='ruleForm.tsId' autocomplete='off' :disabled='true' />
            </el-form-item>
            <el-form-item label='年龄' prop='age'>
                <el-input style='width: 600px;margin: 5px 0;' v-model.number='ruleForm.age' :disabled='false' />
            </el-form-item>
            <el-form-item label='性别' prop='sex'>
                <el-radio-group style='margin: 0 auto;' v-model='ruleForm.sex' :disabled='false'>
                    <el-radio label='男' >男</el-radio>
                    <el-radio label='女' >女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label='电话' prop='phone'>
                <el-input style='width: 600px;margin: 5px 0;' v-model='ruleForm.phone' autocomplete='off' />
            </el-form-item>
            <el-form-item label='密码' prop='tpassword'>
                <el-input style='width: 600px;margin: 5px 0;' v-model='ruleForm.tpassword' autocomplete='off' />
            </el-form-item>
            <el-form-item>
                <el-button style='margin: 0 auto;' type='primary' @click='submitForm(ruleFormRef)'>修改</el-button>
                <el-button style='margin: 0 auto;' type='primary' @click='resetForm(ruleFormRef)'>Reset</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script lang='ts' setup>
import { reactive, ref } from 'vue'
import axios from 'axios';
import type { FormInstance, FormRules } from 'element-plus'

const ruleFormRef = ref<FormInstance>()

const checkAge = (_rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('Please input the age'))
    }
    setTimeout(() => {
        if (!Number.isInteger(value)) {
            callback(new Error('Please input digits'))
        } else {
            if (value < 18) {
                callback(new Error('Age must be greater than 18'))
            } else {
                callback()
            }
        }
    }, 1000)
}


const ruleForm = ref({
    tid: '',
    tname: '',
    departmentName: '',
    tsId: '',
    phone: '',
    age: '',
    sex: '',
    tpassword: ''
})
axios({
    method: 'Get',
    url: '/api/myInformationServlet',
    params: { tid: localStorage.getItem('tid') }
}).then(function (result) {
    console.log(result);
    ruleForm.value = result.data.data;
    console.log(ruleForm.value);
})

const rules = reactive<FormRules<typeof ruleForm>>({
    age: [{ validator: checkAge, trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            axios({
                method: 'POST',
                url: '/api/myInformation',
                data: ruleForm.value
            }).then(function (result) {
                if(result.data.flag){
                    alert('修改成功')
                }else{
                    alert(result.data.message)
                }
            })
        } else {
            console.log('error submit!')
            return false
        }
    })
}

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