src/views/StudentView.vue

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<template>
	<a-page-header style="border: 1px solid rgb(235, 237, 240)" title="学生管理" sub-title="学生信息基本操作" />
	<a-form :model="formState" name="horizontal_query" layout="inline" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
		<a-form-item label="学号" name="no">
			<a-input v-model:value="formState.no"></a-input>
		</a-form-item>
		<a-form-item label="姓名" name="name">
			<a-input v-model:value="formState.name"></a-input>
		</a-form-item>
		<a-form-item>
			<a-button type="primary" html-type="submit">查询</a-button>
		</a-form-item>
		<a-form-item>
			<a-button type="primary" @click="addStudent">新增</a-button>
		</a-form-item>
	</a-form>
	<a-table :columns="columns" :data-source="dataSource" bordered :pagination="false" :row-key="record => record.id">
		<template #bodyCell="{ column, text, record }">
			<template v-if="[ 'no','name', 'sge', 'dex','classesName'].includes(column.dataIndex)">
				<div>{{ text }}</div>
			</template>
			<template v-else-if="column.dataIndex === 'operation'">
				<div class="editable-row-operations">
					<a @click="edit(record.key)">Edit</a>
				</div>
			</template>
		</template>
	</a-table>
	<a-pagination v-model:current="pagination.current" :total="pagination.total" @change="change" />
	<a-modal v-model:visible="visible" okText="保存" cancelText="取消" :wrap-style="{ overflow: 'hidden' }" @ok="handleOk">
		<div>
			<a-page-header style="border: 1px solid rgb(235, 237, 240)" title="学生管理" sub-title="新增或编辑学生" />
			<br />
			<a-form :model="addEditFormState">
				<a-form-item label="学号">
					<a-input v-model:value="addEditFormState.no" />
				</a-form-item>
				<a-form-item label="姓名">
					<a-input v-model:value="addEditFormState.name" />
				</a-form-item>
				<a-form-item label="年龄">
					<a-input v-model:value="addEditFormState.age" />
				</a-form-item>
				<a-form-item label="性别">
					<a-radio-group v-model:value="addEditFormState.sex">
						<a-radio :value="true">男</a-radio>
						<a-radio :value="false">女</a-radio>
					</a-radio-group>
				</a-form-item>
				<a-form-item label="班级">
					<a-select ref="select" v-model:value="addEditFormState.classes" style="width: 200px">
						<a-select-option :value="item.id" v-for="(item) in dataClasses" :key="item.id">{{item.name}}</a-select-option>
					</a-select>
				</a-form-item>
			</a-form>
		</div>
	</a-modal>	

</template>
<script lang="ts">