前言

之前的增删改查小 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);
// ↓ 点击搜索后,将当前页数置为1
pagination.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);
// ↓ 分页查询需要 .records
dataSource.value = resp.data.records;
// ↑ 查询完成后替换数据源
pagination.total = resp.data.total;
// ↑ 改变数据总数
})
.catch((e) => {
console.log("e: ", e);
})
}

测试

AntDesign-Vue Table 查询与分页的更多相关文章

  1. Solr学习总结(六)SolrNet的高级用法(复杂查询,分页,高亮,Facet查询)

    上一篇,讲到了SolrNet的基本用法及CURD,这个算是SolrNet 的入门知识介绍吧,昨天写完之后,有朋友评论说,这些感觉都被写烂了.没错,这些基本的用法,在网上百度,资料肯定一大堆,有一些写的 ...

  2. ASP.NET MVC搭建项目后台UI框架—6、客户管理(添加、修改、查询、分页)

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  3. EF 之 MVC 排序,查询,分页 Sorting, Filtering, and Paging For MVC About EF

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精    上篇博客我们学习了EF CodeFirst增删改查 ...

  4. MVC3 带查询的分页Helper

    接上篇mvc3 分页Helper. 带查询的分页Helper是在上一篇分页的基础上来的.下面看代码: 首先,在System.Web.Mvc命名空间下的自定义类HtmlPage下面添加一个用于处理“查询 ...

  5. MVC+Bootstrap+Drapper使用PagedList.Mvc支持多查询条件分页

    前几天做一个小小小项目,使用了MVC+Bootstrap,以前做分页都是异步加载Mvc部分视图的方式,因为这个是小项目,就随便一点.一般的列表页面,少不了有查询条件,下面分享下Drapper+Page ...

  6. 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理

    在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有 ...

  7. Linq高级查询,分页查询及查询分页结合

    一.高级查询与分页查询 1.以...开头    StartsWith Repeater1.DataSource=con.Users.Where(r=>r.Nickname.StartsWith( ...

  8. 【EF6学习笔记】(三)排序、过滤查询及分页

    本篇原文地址:Sorting, Filtering, and Paging 说明:学习笔记参考原文中的流程,为了增加实际操作性,并能够深入理解,部分地方根据实际情况做了一些调整:并且根据自己的理解做了 ...

  9. 基于Metronic的Bootstrap开发框架经验总结(16)-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理

    在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有 ...

  10. EF6 学习笔记(三):排序、过滤查询及分页

    EF6 学习笔记索引目录页: ASP.NET MVC5 及 EF6 学习笔记 - (目录整理) 上篇:EF6 学习笔记(二):操练 CRUD 增删改查 本篇原文地址:Sorting, Filterin ...

随机推荐

  1. java17特性:文本块

    例子 String content= """ { "text_1":"%s", "text_2":" ...

  2. 题解 WD与数列

    P5161 WD与数列 可以想到原条件是一个差分形式,所以我们对原数组差分.然后发现答案其实就是 \(\sum_{i<j} \min(lcp(i+1,j+1)+1,j-i)\). 这个东西先跑 ...

  3. 【RabbitMQ】13 消息补偿 & 幂等保障

    https://www.bilibili.com/video/BV15k4y1k7Ep?p=34 我靠,幂等保障就是乐观锁控制啊 https://www.bilibili.com/video/BV15 ...

  4. gym库中from gym.wrappers import FlattenObservation的理解

    看代码的过程中看到有这样的调用: from gym.wrappers import FlattenObservation if sinstance(env.observation_space, gym ...

  5. [POI2012] PRE-Prefixuffix 题解

    前言 题目链接:洛谷. 题意简述 给出长为 \(n\) 的串 \(\texttt{S}\).求最大的 \(l\) 满足: \[2l \leq n \land \texttt{S}[1 \ldots l ...

  6. net8实现MediatR小示例C#

    MediatR是.net下的一个实现消息传递的库,简洁高效,它采用中介者设计模式,通过进程内消息传递机制,进行请求/响应.命令.查询.通知和事件的消息传递,可通过泛型来支持消息的智能调度,用于领域事件 ...

  7. SMCA:港中文提出注意力图校准的DETR加速方案 | ICCV 2021

    为了加速DETR收敛,论文提出了简单而有效的Spatially Modulated Co-Attention(SMCA)机制,通过在初始边界框位置给予较高的协同注意力响应值的约束来构建DETR的回归感 ...

  8. Electron初体验

    为什么使用electron 最近准备开发一个国产麒麟系统上的桌面程序,主要完成Linux命令的可视化,而electron作为目前最活跃的跨平台桌面应用程序的框架之一,它可以使用网页技术(如 HTML. ...

  9. 国产化适配——银河麒麟V10(1)

    前言 为响应国家"信创"建设,公司最近在搞国产化适配,我刚好负责这搞一部分,做个记录吧. 主要包括三块:国产服务器操作系统银河麒麟V10,国产数据库人大金仓kingbase,中间件 ...

  10. Maven 配置程序入口

    配置单个程序入口 Exec Maven Plugin 插件允许你在 Maven 生命周期中的某个阶段直接运行 Java 类. 在你的 pom.xml 文件中添加如下配置: <project> ...