管理员账号管理管理员账号管理接口之前已经创建好了同时受益于基类的极大通用性准备好的现成的接口有/admin/auth/admin/list/admin/auth/admin/create/admin/auth/admin/delete/admin/auth/admin/get/pk/admin/auth/admin/update/pk回到前端我们可以利用 src\api\table.ts 中的 TableManagerAPI 表格API请求函数生成类一次性生成好请求以上接口的 请求函数如下const api new TableManagerAPI(‘/admin/auth/admin/’)对应api.get(pk)api.list(filter)// …但是生成好的 api 实例不是我们自己使用的而是直接传递给 表格管家 即可而初始化表格管家时最核心的是写好 table.column列定义数据代码如下import PopupForm from ‘./popupForm.vue’import { TableManagerAPI } from ‘//api/table’import { useTableManager } from ‘//hooks/useTableManager’const api new TableManagerAPI(‘/admin/auth/admin/’)const tableManager useTableManager({api,table: {column: [{ type: ‘selection’, align: ‘center’, operator: false },{ label: ‘ID’, prop: ‘id’, align: ‘center’, operator: ‘eq’, width: 70 },{ label: t(‘auth.admin.username’), prop: ‘username’, align: ‘center’, operator: ‘eq’, quickSearch: true },{ label: t(‘auth.admin.nickname’), prop: ‘nickname’, align: ‘center’, operator: ‘LIKE’, quickSearch: true },{ label: t(‘auth.admin.avatar’), prop: ‘avatar’, align: ‘center’, render: ‘image’, operator: false },{ label: t(‘common.email’), prop: ‘email’, width: 180, align: ‘center’, operator: ‘LIKE’ },{ label: t(‘common.mobile’), prop: ‘mobile’, align: ‘center’, operator: ‘LIKE’ },{label: t(‘common.operate’),align: ‘center’,width: ‘100’,render: ‘buttons’,buttons: optButtons,operator: false,},],filter: {sort: ‘created_at’,order: ‘desc’,},dblClickNotEditColumn: [‘status’],}})tableManager.getData()为保证可阅读性以上代码略有简化接下来将 表格管家 实例传递给 table 组件即可如下PopupForm :managertableManager v-model:form-itemstableManager.form.items! / /div这三个组件所需要的 props基本都可以通过 表格管家 实例取得。此时如果忽略掉 ./popupForm.vue 的代码管理员账号管理的功能最起码是基础的 CRUD 的功能已经完成了样子大概是这样的在这里插入图片描述是的增删改查齐备之所以这么简单全部是受益前几章的铺垫接下来就是表格的 新增 / 编辑 表单了但这更加简单你基本上可以理解为使用 el-form el-form-item 写一个普普通通的表单就行了绑定值与提交方法等全部都提前准备好了且如果需要表单验证也可以使用 buildValidatorRule 快速生成示例如下在这里插入图片描述
