使用Vue3开发学生管理系统模板2 新增学生信息

实现新增学生的功能

第一步：点击新增按钮，弹窗新增学生的页面

function openNew() {student.value = {id: "1",student_id: "1",chinese_id: "5222xxx",name: "张三",age: 13,gender: "男",height: 148,weight: 57,phone: "18811112222",home_id: "1",home_name: "张三家长",home_relation: "父子",home_phone: "18811112222",sclass_id: "1",sclass_name: "初一（3）班",sclass_level: 1,master_id: "1",master_name: "张三班主任",master_phone: "18811112222",address_id: "1",address: "四川省成都市金牛区xxx街道xxx号",detail: "{}"};submitted.value = false;studentDialog.value = true;
}

第二步：填写学生信息

<Dialog v-model:visible="studentDialog":style="{ width: '450px' }"header="新增学生":modal="true"class="p-fluid"><div class="field"><label for="student_id">学生证号</label><InputText id="student_id" v-model.trim="student.student_id"/></div><div class="field"><label for="chinese_id">身份证号</label><InputText id="chinese_id" v-model.trim="student.chinese_id"/></div><div class="field"><label for="name">姓名</label><InputText id="name" v-model.trim="student.name"/></div><div class="field"><label for="age">年龄</label><InputText id="age" v-model.number="student.age"/></div><div class="field"><label for="gender">性别</label><InputText id="gender" v-model.trim="student.gender"/></div><div class="field"><label for="height">身高</label><InputText id="height" v-model.number="student.height"/></div><div class="field"><label for="weight">体重</label><InputText id="weight" v-model.number="student.weight"/></div><div class="field"><label for="phone">电话</label><InputText id="phone" v-model.trim="student.phone"/></div><div class="field"><label for="home_name">家长姓名</label><InputText id="home_name" v-model.trim="student.home_name"/></div><div class="field"><label for="home_phone">家长联系电话</label><InputText id="home_phone" v-model.trim="student.home_phone"/></div><div class="field"><label for="master_name">班主任姓名</label><InputText id="master_name" v-model.trim="student.master_name"/></div><div class="field"><label for="master_phone">班主任联系电话</label><InputText id="master_phone" v-model.trim="student.master_phone"/></div><div class="field"><label for="sclass_name">班级</label><InputText id="sclass_name" v-model.trim="student.sclass_name"/></div><div class="field"><label for="sclass_level">年级</label><InputText id="sclass_level" v-model.trim="student.sclass_level"/></div><div class="field"><label for="address">地址</label><InputText id="address" v-model.trim="student.address"/></div><template #footer><Button label="取消" icon="pi pi-times" class="p-button-text" @click="hideDialog"/><Button label="保存" icon="pi pi-check" class="p-button-text" @click="addStudent"/></template></Dialog>