Vue Element Plus 教师信息修改页面 - 优化后的代码

<p>{&quot;title&quot;:&quot;Vue Element Plus 教师信息修改页面 - 优化后的代码&quot;,&quot;description&quot;:&quot;本页面使用 Vue Element Plus 框架实现教师信息修改功能。用户可以修改教师姓名、年龄、性别、电话、密码等信息。&quot;,&quot;keywords&quot;:&quot;Vue, Element Plus, 教师信息修改, 前端开发, 代码优化&quot;,&quot;content&quot;:&quot;<template>
&lt;div style=&quot;padding: 0 250px 0 250px ;&quot;&gt;
&lt;el-form ref=&quot;ruleFormRef&quot; :model=&quot;ruleForm&quot; status-icon :rules=&quot;rules&quot; label-width=&quot;120px&quot; class=&quot;demo-ruleForm&quot;&gt;
&lt;el-form-item label=&quot;教师id&quot; prop=&quot;tid&quot;&gt;
&lt;el-input style=&quot;width: 600px;margin: 5px 0;&quot; v-model=&quot;ruleForm.tid&quot; autocomplete=&quot;off&quot; :disabled=&quot;true&quot; /&gt;
</el-form-item>
&lt;el-form-item label=&quot;教师名&quot; prop=&quot;tname&quot;&gt;
&lt;el-input style=&quot;width: 600px;margin: 5px 0;&quot; v-model=&quot;ruleForm.tname&quot; autocomplete=&quot;off&quot; :disabled=&quot;false&quot; /&gt;
</el-form-item>
&lt;el-form-item label=&quot;院名&quot; prop=&quot;departmentName&quot;&gt;
&lt;el-input style=&quot;width: 600px;margin: 5px 0;&quot; v-model=&quot;ruleForm.departmentName&quot; autocomplete=&quot;off&quot; :disabled=&quot;true&quot; /&gt;
</el-form-item>
&lt;el-form-item label=&quot;职位&quot; prop=&quot;tsId&quot;&gt;
&lt;el-input style=&quot;width: 600px;margin: 5px 0;&quot; v-model=&quot;ruleForm.tsId&quot; autocomplete=&quot;off&quot; :disabled=&quot;true&quot; /&gt;
</el-form-item>
&lt;el-form-item label=&quot;年龄&quot; prop=&quot;age&quot;&gt;
&lt;el-input style=&quot;width: 600px;margin: 5px 0;&quot; v-model.number=&quot;ruleForm.age&quot; :disabled=&quot;false&quot; /&gt;
</el-form-item>
&lt;el-form-item label=&quot;性别&quot; prop=&quot;sex&quot;&gt;
&lt;el-radio-group style=&quot;margin: 0 auto;&quot; v-model=&quot;ruleForm.sex&quot; :disabled=&quot;false&quot;&gt;
&lt;el-radio label=&quot;男&quot; &gt;男</el-radio>
&lt;el-radio label=&quot;女&quot; &gt;女</el-radio>
</el-radio-group>
</el-form-item>
&lt;el-form-item label=&quot;电话&quot; prop=&quot;phone&quot;&gt;
&lt;el-input style=&quot;width: 600px;margin: 5px 0;&quot; v-model=&quot;ruleForm.phone&quot; autocomplete=&quot;off&quot; /&gt;
</el-form-item>
&lt;el-form-item label=&quot;密码&quot; prop=&quot;tpassword&quot;&gt;
&lt;el-input style=&quot;width: 600px;margin: 5px 0;&quot; v-model=&quot;ruleForm.tpassword&quot; autocomplete=&quot;off&quot; /&gt;
</el-form-item>
<el-form-item>
&lt;el-button style=&quot;margin: 0 auto;&quot; type=&quot;primary&quot; @click=&quot;submitForm(ruleFormRef)&quot;&gt;修改</el-button>
&lt;el-button style=&quot;margin: 0 auto;&quot; type=&quot;primary&quot; @click=&quot;resetForm(ruleFormRef)&quot;&gt;Reset</el-button>
</el-form-item>
</el-form>
</div>
</template></p>
<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()
}
</script> 
<p>点击修改传入的参数为空怎么解决</p>
<p>内容：根据代码，点击修改时传入的参数为空的原因可能是以下几点：</p>
<ol>
<li>
<p><code>submitForm</code>方法中的<code>ruleFormRef</code>参数未正确传入。确保在调用<code>submitForm</code>方法时，正确传入<code>ruleFormRef</code>参数。</p>
</li>
<li>
<p><code>ruleFormRef</code>的值未正确设置。确保在组件中正确设置<code>ruleFormRef</code>的值。</p>
</li>
<li>
<p><code>axios</code>请求返回的数据为空。可以在控制台输出<code>result.data</code>，查看返回的数据是否为空。</p>
</li>
<li>
<p>确保<code>ruleFormRef</code>和<code>ruleForm</code>都是响应式对象。可以将它们改为<code>reactive</code>对象，而不是<code>ref</code>对象。</p>
</li>
</ol>
<p>请按照以上步骤进行排查，如果问题仍然存在，请提供更多代码和错误信息以便进一步分析。</p>