src/views/MenuView.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="菜单名">
			<a-input v-model:value="formState.menuName"></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="add">新增</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="[ 'name','id','parentId','sortId','description','url'].includes(column.dataIndex)">
				<div>{{ text }}</div>
			</template>
			<template v-else-if="[ 'icon'].includes(column.dataIndex)">
				<div> 
					<a-image :width="20" :height="20" :src="text"/>
				</div>
			</template>
			<template v-else-if="column.dataIndex === 'operation'">
				<div class="editable-row-operations">
					<a @click="edit(record.id)">编辑</a>
				</div>
			</template>
		</template>
	</a-table>
	<a-pagination v-model:current="pagination.current" :total="pagination.total" @change="change" />
	<a-modal ref="modalRef" 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.name" />
				</a-form-item>
				<a-form-item label="描述">
					<a-input v-model:value="addEditFormState.description" />
				</a-form-item>
				<a-form-item label="Url">
					<a-input v-model:value="addEditFormState.url" />
				</a-form-item>
				<a-form-item label="图标">
					<a-input v-model:value="addEditFormState.icon" />
				</a-form-item>
				<a-form-item label="父ID">
					<a-input v-model:value="addEditFormState.parentId" />
				</a-form-item>
				<a-form-item label="排序">
					<a-input v-model:value="addEditFormState.sortId" />
				</a-form-item>
			</a-form>
		</div>
	</a-modal>
</template>
<script lang="ts">
	import {