问题描述 Problem Description
在使用 usePagination 方法是如何配置pages、total等字段映射。
在使用antdv table 的加载远程数据时推荐用到 vue-request 插件,想着可以自动控制加载状态和分页操作也挺好的。但是配置加载完数据之后分页信息配置不上 我百度了很久 也尝试做了一些配置 ,实在是没找到怎么配置totls和pages等信息的方法。无奈 来到这里寻求帮互助 先行答谢有缘人了
antdv 例子:
其他信息 Other information
import { usePagination } from "vue-request";
import _api from "@http/api";
import {
computed,
defineComponent,
onBeforeUnmount,
onMounted,
reactive,
ref,
watch,
inject,
} from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
export default {
name: "menu-bs",
setup(props, context) {
const store = useStore();
const router = useRouter();
const columns = [
{
title: "Name",
dataIndex: "name",
sorter: true,
width: "20%",
},
{
title: "Gender",
dataIndex: "gender",
filters: [
{
text: "Male",
value: "male",
},
{
text: "Female",
value: "female",
},
],
width: "20%",
},
{
title: "Email",
dataIndex: "email",
},
];
const queryPageData = _api.menuApiModules.page;
const {
data: dataSource,
run,
loading,
total,
current,
pageSize,
} = usePagination(queryPageData, {
formatResult: (res) => {
return res.data.data.records
},
pagination: {
currentKey: "pageNum",
pageSizeKey: "pageSize",
totalKey: "res.data.data.total"
},
});
const pagination = computed(() => ({
total: total.value,
current: current.value,
pageSize: pageSize.value,
hideOnSinglePage: true,
}));
const handleTableChange = (pag, filters, sorter) => {
run({
results: pag.pageSize,
page: pag?.current,
sortField: sorter.field,
sortOrder: sorter.order,
...filters,
});
};
return {
dataSource,
pagination,
loading,
columns,
handleTableChange,
};
},
};
我的数据是这样的
{
"code": 200,
"data": {
"records": [
{
```数据对象```
},
],
"total": 12,
"size": 10,
"current": 1,
"orders": [],
"optimizeCountSql": true,
"searchCount": true,
"countId": null,
"maxLimit": null,
"pages": 2
},
"msg": "菜单数据分页查询成功"
}
vue devtools 截图

question