管理员账号管理
管理员账号管理接口之前已经创建好了，同时受益于基类的极大通用性，准备好的现成的接口有：
/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 :manager="tableManager" v-model:form-items="tableManager.form.items!" /> </div>此时，如果忽略掉 ./popupForm.vue 的代码，管理员账号管理的功能，最起码是基础的 CRUD 的功能，已经完成了，样子大概是这样的：
在这里插入图片描述
是的，增删改查齐备，之所以这么简单，全部是受益前几章的铺垫；接下来就是表格的 新增 / 编辑 表单了，但这更加简单，你基本上可以理解为，使用 el-form + el-form-item 写一个普普通通的表单就行了，绑定值与提交方法等，全部都提前准备好了，且如果需要表单验证，也可以使用 buildValidatorRule 快速生成，示例如下：
在这里插入图片描述
