Ant Design Vue中的table与pagination的联合使用

news2024/11/28 2:54:04

效果: 

代码:

<a-table
    :dataSource="dataSource"
    :columns="columns"
    :pagination="pagination"
    @change="handleTableChange"
    :scroll="{ x: '100%', y: 600 }"
  >
</a-table>
export default defineComponent({
  setup() {
    const current = ref(1);
    const pageSize = ref(10);
    const pagination = computed(() => ({
      current: current.value,
      pageSize: pageSize.value,
      total: 30,
      showTotal: (total) => `共 ${total} 条`,
      pageSizeOptions: ["5", "10", "15"],
      showSizeChanger: true,
    }));
    const handleTableChange = (pag, filters, sorter) => {
      current.value = pag.current;
      pageSize.value = pag.pageSize;
    };

    return {
      pagination,
      handleTableChange,
    };
  },
});

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1562669.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

物联网学习2、MQTT 发布/订阅模式介绍

MQTT 发布/订阅模式 发布订阅模式&#xff08;Publish-Subscribe Pattern&#xff09;是一种消息传递模式&#xff0c;它将发送消息的客户端&#xff08;发布者&#xff09;与接收消息的客户端&#xff08;订阅者&#xff09;解耦&#xff0c;使得两者不需要建立直接的联系也不…

【redis】MISCONF Redis is configured to save RDB snapshots报错解决方案

【redis】MISCONF Redis is configured to save RDB snapshots报错解决方案 大家好 我是寸铁&#x1f44a; 总结了一篇【redis】MISCONF Redis is configured to save RDB snapshots报错解决方案✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 前言 今天在登录redis时&#xff0c…

环境配置——已解决ModuleNotFoundError: No module named ‘cv2’(python)

一、报错代码 在网上搜到不少用Python处理图形的代码&#xff0c;于是复制别人的代码直接运行却报错&#xff0c;得到的结果却是&#xff1a;已解决ModuleNotFoundError: No module named ‘cv2’。&#xff08;当时心里瞬间凉了一大截&#xff0c;最后顺利解决了&#xff0c;顺…

pandas ( day3)

一. Cov() 协方差 corr&#xff08;&#xff09;是 相关系数 &#xff0c;他将 协方差 cov 进一步压缩在 -1 ~ 1 之间 &#xff0c; 1 是正相关0 是不相干-1 是 负相关 A B C 0 68 95 66 1 99 87 67 2 87 87 91 3 59 87 72 4 59 91 79 5 82 88 50 6 88 74 85 7 95 67 72 8 …

Sentinel入门流控编码方式

系列文章目录 文章目录 系列文章目录前言前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 随着微服务的流行,服务和服务之间的稳定性变得越来越重要。Sentinel 以流…

Dapr(一) 基于云原生了解Dapr

(这期先了解Dapr&#xff0c;之后在推出如何搭建Dapr&#xff0c;以及如何使用。) 目录 引言&#xff1a; Service Mesh定义 Service Mesh解决的痛点 Istio介绍 Service Mesh遇到的挑战 分布式应用的需求 Multiple Runtime 理念推导 Dapr 介绍 Dapr 特性 Dapr 核心…

算法系列--递归,回溯,剪枝的综合应用(1)

&#x1f495;"对相爱的人来说&#xff0c;对方的心意&#xff0c;才是最好的房子。"&#x1f495; 作者&#xff1a;Lvzi 文章主要内容&#xff1a;算法系列–递归,回溯,剪枝的综合应用(1) 大家好,今天为大家带来的是算法系列--递归,回溯,剪枝的综合应用(1) 1.全排…

成都直播产业园有哪些特色服务

在成都这片热土上&#xff0c;天府锋巢直播产业基地以其特色服务独树一帜&#xff0c;成为了引领直播行业的先锋。 一、天府锋巢直播产业基地的特色服务&#xff0c;首先体现在其完善的产业链整合能力上。 作为西南大型的成都直播产业园区&#xff0c;这里不仅汇聚了众多优秀…

【C++杂货铺】详解list容器

目录 &#x1f308;前言&#x1f308; &#x1f4c1; 介绍 &#x1f4c1; 使用 &#x1f4c2; 构造 &#x1f4c2; 迭代器iterator &#x1f4c2; capacity &#x1f4c2; modifiers &#x1f4c2; 迭代器失效 &#x1f4c1; 模拟实现 &#x1f4c2; 迭代器的实现 &#x…

可视化图表:漏斗图,分析转化率的时候最常用。

一、漏斗图的定义和构成 漏斗图是一种可视化工具&#xff0c;用于展示数据的层级关系和变化趋势。它由一系列水平条形组成&#xff0c;每个条形的宽度逐渐减小&#xff0c;呈现出漏斗的形状。漏斗图通常用于分析和比较不同层级的数据&#xff0c;例如销售渠道的转化率、招聘流…

Redis面试题汇总

一、动力节点Redis的书 1. Redis有哪些特性&#xff1f; 2. Redis的IO模型是单线程还是多线程&#xff1f; Redis4.0版本以前是纯粹的单线程模型&#xff1b;从4.0版本开始&#xff0c;处理客户端请求的仍然是单线程模型&#xff0c;但像持久化、对AOF的rewrite、对失效连接的…

Aspect使用

今天在敲苍穹外卖的时候用到了 SpringBoot 中的 AOP&#xff0c;这里简单记录下使用过程。 背景 目前的CreateTime、CreateUser、UpdateTime、UpdateUser等字段都是在插入和更新操作时手动设置&#xff0c; 每次都要手动操作太麻烦&#xff0c;可以把这几个操作放到一块包装一…

前端开发的主要语言有哪些?

1、HTML (HyperText Markup Language) 作用&#xff1a;HTML是构建网页内容的基础&#xff0c;是一种标记语言&#xff0c;用来定义网页的结构&#xff0c;如标题、段落、列表、表格、图像、链接等元素。优点&#xff1a;易于学习&#xff0c;广泛兼容&#xff0c;标准化程度高…

【MATLAB源码-第27期】基于matlab的QPSK定时同步仿真,采用gardner算法,Costa锁相环。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 QPSK&#xff0c;有时也称作四位元PSK、四相位PSK、4-PSK&#xff0c;在坐标图上看是圆上四个对称的点。通过四个相位&#xff0c;QPSK可以编码2位元符号。图中采用格雷码来达到最小位元错误率&#xff08;BER&#xff09; —…

双目测距项目 | 在Jetson-Nano平台上部署SGBM深度测距+YOLOv5目标检测算法

项目应用场景 面向在 Jetson Nano 平台上部署 SGBM 深度测距和基于 YOLOv5 的目标检测算法&#xff0c;实现双目测距的功能。 项目流程与效果&#xff1a; 项目细节 > 具体参见项目 README.md项目获取 https://download.csdn.net/download/weixin_42405819/89051043

【经验分享】Ubuntu下如何解决问题arm-linux-gcc:未找到命令

【经验分享】Ubuntu下如何解决问题arm-linux-gcc&#xff1a;未找到命令 前言问题分析解决方法 前言 在编译过程中发现一个问题&#xff0c;明明之前安装了gcc-4.6版本&#xff0c;版本信息都是正常显示的&#xff0c;刚安装上去的时候也是可以用的。但不知道什么原因突然不能…

Linux多进程通信(3)——详细说说共享内存原理及使用例程

1.共享内存原理及优缺点 共享内存的原理便是将相同的一片物理内存映射到进程A和进程B不同的逻辑地址空间&#xff0c;两个进程同时访问这块物理内存&#xff08;共享内存&#xff09;。 1&#xff09;优点 共享内存是进程间通信访问速度最快。 例如消息队列&#xff0c;FIFO&…

【MATLAB源码-第21期】基于matlab的BCH码编码译码仿真,调制使用QPSK,对比编码与未编码的误码率曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 QPSK调制解调&#xff1a;QPSK&#xff08;Quadrature Phase Shift Keying&#xff09;调制解调**是一种数字调制技术&#xff0c;通常用于数字通信系统。 调制&#xff1a; 1. 首先&#xff0c;将数字信号分成两路&#xff…

Django创建多app应用

目录 1. 引言 2. 多app创建的两种方式 2.1 多个app结构 2.2 单个apps多个app 3. 最后 1. 引言 在平常业务开发中&#xff0c;我们遇到的功能可能会有很多&#xff0c;单个app的应用可能无法满足我们 这个时候&#xff0c;我们就需要多app应用&#xff0c;例如&#xff1a…

22-应用构建三剑客:Pflag、Viper、Cobra核心功能介绍

如何构建应用框架 想知道如何构建应用框架&#xff0c;首先你要明白&#xff0c;一个应用框架包含哪些部分。在我看来&#xff0c;一个应用框架需要包含以下3个部分&#xff1a; 命令行参数解析&#xff1a;主要用来解析命令行参数&#xff0c;这些命令行参数可以影响命令的运…