diff --git a/apps/backend-mock/api/table/list.ts b/apps/backend-mock/api/table/list.ts index 4a0db94e..55b88eaa 100644 --- a/apps/backend-mock/api/table/list.ts +++ b/apps/backend-mock/api/table/list.ts @@ -43,6 +43,31 @@ export default eventHandler(async (event) => { await sleep(600); - const { page, pageSize } = getQuery(event); - return usePageResponseSuccess(page as string, pageSize as string, mockData); + const { page, pageSize, sortBy, sortOrder } = getQuery(event); + const listData = structuredClone(mockData); + if (sortBy && Reflect.has(listData[0], sortBy as string)) { + listData.sort((a, b) => { + if (sortOrder === 'asc') { + if (sortBy === 'price') { + return ( + Number.parseFloat(a[sortBy as string]) - + Number.parseFloat(b[sortBy as string]) + ); + } else { + return a[sortBy as string] > b[sortBy as string] ? 1 : -1; + } + } else { + if (sortBy === 'price') { + return ( + Number.parseFloat(b[sortBy as string]) - + Number.parseFloat(a[sortBy as string]) + ); + } else { + return a[sortBy as string] < b[sortBy as string] ? 1 : -1; + } + } + }); + } + + return usePageResponseSuccess(page as string, pageSize as string, listData); }); diff --git a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue index 91749835..30ba9ece 100644 --- a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue +++ b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue @@ -243,7 +243,8 @@ async function init() { const autoLoad = defaultGridOptions.proxyConfig?.autoLoad; const enableProxyConfig = options.value.proxyConfig?.enabled; if (enableProxyConfig && autoLoad) { - props.api.reload(formApi.form?.values ?? {}); + props.api.grid.commitProxy?.('_init', formApi.form?.values ?? {}); + // props.api.reload(formApi.form?.values ?? {}); } // form 由 vben-form代替,所以不适配formConfig,这里给出警告 diff --git a/playground/src/views/examples/vxe-table/remote.vue b/playground/src/views/examples/vxe-table/remote.vue index 7fc98a08..907c1e2c 100644 --- a/playground/src/views/examples/vxe-table/remote.vue +++ b/playground/src/views/examples/vxe-table/remote.vue @@ -25,10 +25,10 @@ const gridOptions: VxeGridProps = { columns: [ { title: '序号', type: 'seq', width: 50 }, { align: 'left', title: 'Name', type: 'checkbox', width: 100 }, - { field: 'category', title: 'Category' }, - { field: 'color', title: 'Color' }, - { field: 'productName', title: 'Product Name' }, - { field: 'price', title: 'Price' }, + { field: 'category', sortable: true, title: 'Category' }, + { field: 'color', sortable: true, title: 'Color' }, + { field: 'productName', sortable: true, title: 'Product Name' }, + { field: 'price', sortable: true, title: 'Price' }, { field: 'releaseDate', formatter: 'formatDateTime', title: 'DateTime' }, ], exportConfig: {}, @@ -36,19 +36,26 @@ const gridOptions: VxeGridProps = { keepSource: true, proxyConfig: { ajax: { - query: async ({ page }) => { + query: async ({ page, sort }) => { return await getExampleTableApi({ page: page.currentPage, pageSize: page.pageSize, + sortBy: sort.field, + sortOrder: sort.order, }); }, }, + sort: true, + }, + sortConfig: { + defaultSort: { field: 'category', order: 'desc' }, + remote: true, }, toolbarConfig: { custom: true, export: true, // import: true, - refresh: true, + refresh: { code: 'query' }, zoom: true, }, };