表格 VxeGrid
这篇解决什么
列表页怎么接分页接口、列怎么画字典和操作按钮。读完用 #/adapter/vxe-table 的 useVbenVxeGrid，不要在业务页直接 new VxeTable。
列表外包 <Page auto-content-height>。列定义放同目录 data.ts。工程入口见 前端工程结构。
示意图：表格自己拉数。列和表单 schema 分开写。
从哪改
| 名称 | 说明 | 仓库路径 |
|---|---|---|
| 适配器 | 全局 grid 默认值、CellDict / CellImage | ruoyi-office-vben/apps/web-antd/src/adapter/vxe-table.ts |
| 操作列 | TableAction、ACTION_ICON | src/components/table-action/ |
| 样例 | 组织列表 | src/views/system/dept/index.vue |
| 后端分页 | list + total | ruoyi-office/yudao-framework/ 的 PageResult |
适配器默认：proxyConfig.response 认 list / total，autoLoad: true，工具栏开刷新 / 缩放 / 列设置，关掉导入导出打印。formConfig.enabled=false，搜索走外面的 formOptions，不要再用 vxe 自带表单。
分页接口把 pageNo / pageSize 放进 query 的 params。树表可以关 pagerConfig.enabled，query 直接回数组，如部门 getDeptList。
工具栏按钮写在 #toolbar-tools，auth: ['system:dept:create'] 与 权限与按钮 同一套权限字。行内编辑 / 删除同样走 TableAction。
列渲染优先用已注册名字：CellDict、CellSwitch、CellImage、CellRouterLink。日期用 formatter: 'formatDateTime'。不要在列里再手写一堆 h(Tag)。
刷新调用 gridApi.query()，不要 location.reload。
字段
| 名称 | 说明 | 仓库路径 |
|---|---|---|
proxyConfig.ajax.query | 拉数函数 | useVbenVxeGrid |
rowConfig.keyField | 行键，常用 id | 各列表 index.vue |
cellRender.name | 已注册渲染器 | adapter/vxe-table.ts |
CellDict 的 props 是 type
写 props: { type: DICT_TYPE.COMMON_STATUS }。写 dictType 标签是空的。见 字典数据。
高度交给 Page
height: 'auto' 配 Page auto-content-height。自己算 window.innerHeight 会和顶栏、页签抢滚动。
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: useGridColumns(),
proxyConfig: {
ajax: { query: async ({ page }) => getXxxPage({ pageNo: page.currentPage, pageSize: page.pageSize }) },
},
},
});分页 query 形态按本仓库多数列表；树表可不传 page。
