fix: models 页改 :data 响应式绑定(异步 fetch 数据 + proxy 分页时序导致 0 条,vxe-grid data 直绑最稳)
This commit is contained in:
@@ -5,7 +5,7 @@
|
||||
* - 降级:API 不可达时回退 localStorage(iaop.admin.models.v1,旧版 key),UI 标注「离线演示模式」;
|
||||
* - 迁移:检测 localStorage 有数据且服务端在线时提示导入。
|
||||
*/
|
||||
import { computed, nextTick, onMounted, ref, watch } from 'vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import { Page, VbenButton } from '@vben/common-ui';
|
||||
import { message } from 'antdv-next';
|
||||
@@ -61,26 +61,15 @@ const gridOptions: VxeTableGridOptions = {
|
||||
{ title: '说明', field: 'description', minWidth: 220 },
|
||||
{ title: '操作', field: 'action', width: 170, slots: { default: 'action' } },
|
||||
],
|
||||
proxy: {
|
||||
query: async ({ page } = {}) => {
|
||||
// page 可能缺省(分页未就绪的首次查询),兜底返回全量
|
||||
const cur = page?.currentPage ?? 1;
|
||||
const size = page?.pageSize ?? (models.value.length || 10);
|
||||
return {
|
||||
items: models.value.slice((cur - 1) * size, cur * size),
|
||||
total: models.value.length,
|
||||
};
|
||||
},
|
||||
},
|
||||
// 数据直接绑定 :data(响应式自动渲染,规避 proxy 分页就绪时序)
|
||||
data: models,
|
||||
};
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });
|
||||
|
||||
// 数据变化自动刷新表格(双保险:init 的 refresh 与 watch 都触发 query)
|
||||
watch(models, () => gridApi.query());
|
||||
|
||||
async function refresh() {
|
||||
gridApi.query();
|
||||
// :data 响应式绑定,数据变化自动渲染
|
||||
}
|
||||
|
||||
async function loadFromServer() {
|
||||
@@ -93,7 +82,6 @@ async function init() {
|
||||
try {
|
||||
await loadFromServer();
|
||||
online.value = true;
|
||||
await nextTick();
|
||||
refresh();
|
||||
// 迁移提示:本地有数据且服务端在线(且本地有服务端没有的模型)
|
||||
const local = loadLocal();
|
||||
@@ -185,7 +173,7 @@ onMounted(init);
|
||||
<a-tag :color="online ? 'green' : 'orange'">{{ online ? '● 服务端在线' : '● 离线演示模式' }}</a-tag>
|
||||
</template>
|
||||
<a-spin :spinning="loading">
|
||||
<Grid>
|
||||
<Grid :data="models">
|
||||
<template #stage="{ row }">
|
||||
<a-tag :color="tagColor(row.stage)">{{ row.stage }}</a-tag>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user