AntDesign-Vue Table 查询与分页

前言

之前的增删改查小 Demo 已经快要进行到最后一步了，这节的任务是将请求数据的方式改为 分页，并且增加 分页条件查询 的功能。

页面布局

<a-table:data-source="dataSource":columns="columns":pagination="pagination"
>
<!-- ↑ pagination 是分页功能，传入一个对象 --><!-- ↓ 为 a-table 组件添加个表头，里面有一个输入框和一个按钮 --><template #title><div><div><!-- 为输入框绑定事件 --><a-input :bordered="false" placeholder="请输入水果名称" @keydown.enter="fnc_search" id="search"></a-input><!-- 为按钮绑定事件 --><a-button @click="fnc_search"><!-- ↓ 一个放大镜按钮 --><SearchOutlined></SearchOutlined></a-button></div><!-- 在表格中添加数据的按钮，和这篇文章没关系 --><a-button @click="showAddModal">添加</a-button></div></template><!-- ↓ 显示图片的 template --><template v-slot:bodyCell="{ column, record, index}"><template v-if="column.dataIndex === 'pic'"><img :src="record.avatar" @click="checkInfo(record, index)"/></template></template>
</a-table>

逻辑部分

const keywords = ref("");
// ↑ 用以储存查询关键词的变量
// ↓ 分页对象
const pagination = reactive({defaultPageSize: 8, // 默认每页显示多少个defaultCurrent: 1,total: 0,current: 1,onChange: (current: number, size: number) => {console.log("改变了页数");console.log("current: ", current);console.log("size: ", size);pagination.current = current;getFruitsRequest(keywords.value, current, dataSource, pagination);// getFruitsRequest 函数在 api.js 这个文件里，下面会提到}
})// 在挂载页面时请求数据，此时 keywords 为空字符串
onMounted(() => {getFruitsRequest(keywords.value, 1, dataSource, pagination);
})// ↓ 表格列数据
const columns = [{title: '水果名称',dataIndex: 'fruitName',key: 'fruitName',},{title: '图片',dataIndex: 'pic',key: 'pic',},{title: '价格 （元/公斤）',dataIndex: 'price',key: 'price',},{title: '库存（公斤）',dataIndex: 'stock',key: 'stock',},
];/*** 点击搜索按钮的回调*/
function fnc_search() {// 输入框 id 为 search// 这里通过 js 拿到 a-input 内的数据// 如果使用 v-model 方式的话会在输入框内数据发生改变时就改变 keyword 的值// 导致在输入框中有内容时，没有点击搜索按钮而直接点击翻页按钮也会触发关键词搜索if ((document.getElementById("search") as any).value === "") {// ↓ 如果值为空则将 keywords 置空keywords.value =  "";} else {// ↓ 前面加一个 '/' 为了拼接 api 接口// 例如：// http://www.xx00.com/fruits/1/5// ↑ 请求分页，第一页，请求五条数据// http://www.xx00.com/fruits/apple/2/3// ↑ 请求分页，关键词：apple，第二页，请求三条数据keywords.value = '/' + (document.getElementById("search") as any).value;}getFruitsRequest(keywords.value, 1, dataSource, pagination);// ↓ 点击搜索后，将当前页数置为1pagination.current = 1;
}

// api.ts
import axios from "axios";const fruitApi = axios.create({// 设置超出响应时间timeout: 5000
})/*** 分页查询*/
export function getFruitsRequest(keywords = "", currentPage: number, dataSource: any, pagination: any) {fruitApi({method: 'get',url: 'api/fruits' + keywords + '/' + currentPage + '/8'// 默认请求 8 条数据}).then((resp) => {console.log(resp.data);// ↓ 分页查询需要 .recordsdataSource.value = resp.data.records;// ↑ 查询完成后替换数据源pagination.total = resp.data.total;// ↑ 改变数据总数}).catch((e) => {console.log("e: ", e);})
}

测试