vue3封装分页组件

1.新建Pagination文件以及该文件夹下新建index.vue

2.在index.vue文件中编写一下代码

<template><div :class="{ 'hidden': hidden }" class="pagination-container"><el-pagination:background="background"v-model:current-page="currentPage"v-model:page-size="pageSize":layout="layout":page-sizes="pageSizes":pager-count="pagerCount":total="+total"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div>
</template><script setup>
import { scrollTo } from '@/utils/scroll-to'const props = defineProps({total: {required: true,type: Number},page: {type: Number,default: 1},limit: {type: Number,default: 20},pageSizes: {type: Array,default() {return [30, 60, 100]}},// 移动端页码按钮的数量端默认值5pagerCount: {type: Number,default: document.body.clientWidth < 992 ? 5 : 7},layout: {type: String,default: 'total, sizes, prev, pager, next, jumper'},background: {type: Boolean,default: true},autoScroll: {type: Boolean,default: true},hidden: {type: Boolean,default: false}
})const emit = defineEmits();
const currentPage = computed({get() {return props.page},set(val) {emit('update:page', val)}
})
const pageSize = computed({get() {return props.limit},set(val){emit('update:limit', val)}
})
function handleSizeChange(val) {if (currentPage.value * val > props.total) {currentPage.value = 1}emit('pagination', { page: currentPage.value, limit: val })if (props.autoScroll) {scrollTo(0, 800)}
}
function handleCurrentChange(val) {emit('pagination', { page: val, limit: pageSize.value })if (props.autoScroll) {scrollTo(0, 800)}
}</script><style scoped>
.demo-pagination-block {position: fixed;bottom: 20px;right: 20px;width: 50vw;padding-bottom: 20px;background: #fff;z-index: 99;.pagination-container {margin-top: 0;}
}
.pagination-container {background: #fff;padding: 0 16px 20px;
}
.pagination-container.hidden {display: none;
}
</style>

3.使用封装的组件

<div class="demo-pagination-block"><pagination :total="data.total" v-model:page="searchParams.pageNum" v-model:limit="searchParams.pageSize"@pagination="getList" />
</div>

wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

import { pageList } from '@/api/dataScheduling/portDataList'const searchParams = reactive({containerNo: '', // 集装箱号searchDate: '', // 筛选时间dataStatus: '', // 状态shipName: '', // 船名destinationPort: '', // 目的港pageNum: 1, // 页码pageSize: 30, // 条数
});const data = reactive({total: 10, // 总条数tableData: [], // 数据列表
});
onMounted(() => {getList();
});// 获取数据列表
const getList = () => {let params = { ...searchParams }pageList(params).then(res => {console.log('获取列表', res);data.tableData = res.rowsdata.total = res.total})
};

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

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

相关文章

GPU 基础知识整理

萌新&#xff1a; 在接触一款硬件时我会&#xff1a;基础硬件结构&#xff0c;线程结构&#xff0c;内存布局&#xff0c;数据吞吐量&#xff0c;等方面进行学习 首先GPU的特点: 并行性能&#xff1a;GPU 是专门设计用于并行计算的硬件&#xff0c;通常具有大量的处理单元&am…

文字与视频结合效果

效果展示 CSS 知识点 mix-blend-mode 属性的运用 实现整体页面布局 <section class"sec"><video autoplay muted loop><source src"./video.mp4" type"video/mp4" /></video><h2>Run</h2><!-- 用于切…

免费在线真好用的思维脑图

大家好这里是tony4geek 。 今天给大家介绍一个工具。思维脑图生成器。最近写文章需要用到思维脑图&#xff0c;如果手上没有xmind 这种类工具是挺麻烦的。下载xmind 还得破解注册很费时间。 看看有没有在线生成的&#xff0c;找了好久没有找到合适的&#xff0c;最后在国外一…

Python接口自动化测试之【测试函数、测试类/测试方法的封装】

前言 在pythonpytest 接口自动化系列中&#xff0c;我之前的文章基本都没有将代码进行封装&#xff0c;但实际编写自动化测试脚本中&#xff0c;我们都需要将测试代码进行封装&#xff0c;才能被测试框架识别执行。 例如单个接口的请求代码如下&#xff1a; import requests…

Vue—大文件分片上传

背景 如题&#xff0c;最近遇到大文件上传慢的问题&#xff0c;用户需要经常上传一些超过一百多M的文件&#xff0c;系统由于历史原因上传功能并没有做分片上传的功能&#xff0c;是整个文件上传&#xff0c;并且服务器带宽限制和NGINX对文件大小的限制等问题&#xff0c;所以…

【excel技巧】如何在Excel表格中添加选项按钮?

不知道大家是否会9遇到需要勾中选项的情况&#xff0c;我们可以在电子表格中制作出可以勾选、选中的选项按钮&#xff0c;今天我们一起学习一下设置方法。 首先&#xff0c;我们需要先在excel工具栏中添加一个功能模块&#xff1a;开发工具 依次点击excel中的文件 – 选项 –…

炒现货白银的最佳时间

天时地利人和是我们进行现货白银投资最关键的因素。天时是指我们因时而动&#xff0c;在适合的时机出击。地利&#xff0c;就是我们对市场的定位&#xff0c;对自己入场的定位有清晰的了解&#xff0c;并且这些位置对我们有利。人和就是指投资者的状态很好&#xff0c;对如何进…

数学建模——确定性时间序列分析方法

目录 介绍 确定性时间序列分析方法 1、时间序列的常见趋势 &#xff08;1&#xff09;长期趋势 &#xff08;2&#xff09;季节变动 &#xff08;3&#xff09;循环变动 &#xff08;4&#xff09;不规则变动 常见的时间序列模型有以下几类 2、时间序列预测的具体方法 …

1000个已成功入职的软件测试工程师简历范文模板(含真实简历)

如果你想学习自动化测试&#xff0c;那么下面这套视频应该会帮到你很多 如何逼自己1个月学完自动化测试&#xff0c;学完即就业&#xff0c;小白也能信手拈来&#xff0c;拿走不谢&#xff0c;允许白嫖.... 最后我这里给你们分享一下我所积累和整理的一些文档和学习资料&#…

EDUSRC-记一个SHELL捡漏

目录 ​编辑 Jenkins - println绕过到shell命令执行 语法 Jenkins未授权访问(捡漏失败) Jenkins捡漏 弱口令 脚本执行(println失败) CHATGPT调教绕过 hack渗透视频教程&#xff0c;扫码免费领 Jenkins - println绕过到shell命令执行 语法 org"China Education and…

IDEA插件版本升级和兼容新版本idea

1.关于IDEA插件的版本设置问题 打开jetbrains插件市场&#xff0c;随意打开一个插件详情页面的Versions菜单&#xff0c;我们可以看见一个插件包不同时期发布的不同版本&#xff08;Versions&#xff09;&#xff0c;并且每个版本包含了可兼容IDEA或PyCharm的版本范围&#xf…

Avalonia常用小控件Menu

1.项目下载地址&#xff1a;https://gitee.com/confusedkitten/avalonia-demo 2.UI库Semi.Avalonia&#xff0c;项目地址 https://github.com/irihitech/Semi.Avalonia 样式预览&#xff1a; axaml代码 &#xff1a; <UserControl xmlns"https://github.com/avalo…

【个人博客公网访问】使用Cpolar+Emlog在Ubuntu上轻松搭建个人博客公网访问

文章目录 前言1. 网站搭建1.1 Emolog网页下载和安装1.2 网页测试1.3 cpolar的安装和注册 2. 本地网页发布2.1 Cpolar临时数据隧道2.2.Cpolar稳定隧道&#xff08;云端设置&#xff09;2.3.Cpolar稳定隧道&#xff08;本地设置&#xff09; 3. 公网访问测试总结 前言 博客作为使…

性能测试 —— 生成html测试报告、参数化、jvm监控

1.生成HTML的测试报告 1.1配置 (1)找到jmeter 的安装目录&#xff0c;下的bin中的jmeter.properties&#xff08;jmeter配置文件&#xff09; (2) ctrl f &#xff0c;搜索jmeter.save.saveservice.output_format&#xff0c;取消井号 并且 把等号后的xml改为csv&#xff0c;…

Vue 中 KeepAlive 内置缓存使用

KeepAlive 介绍及使用场景 KeepAlive 是 vue 中的内置组件&#xff0c;当多个组件动态切换时可以对实例状态进行缓存&#xff0c;用法如下 <router-view v-slot"{ Component }"><keep-alive><component :is"Component" /></keep-al…

麻省理工学院与Meta AI共同开发StreamingLLM框架,实现语言模型无限处理长度

&#x1f989; AI新闻 &#x1f680; 麻省理工学院与Meta AI共同开发StreamingLLM框架&#xff0c;实现语言模型无限处理长度 摘要&#xff1a;麻省理工学院与Meta AI的研究人员联合研发了一款名为StreamingLLM的框架&#xff0c;解决了大语言模型在RAM与泛化问题上的挑战&am…

信息系统项目管理师第四版学习笔记——配置与变更管理

配置管理 管理基础 配置管理是为了系统地控制配置变更&#xff0c;在信息系统项目的整个生命周期中维持配置的完整性和可跟踪性&#xff0c;而标识信息系统建设在不同时间点上配置的学科。 配置项的版本号规则与配置项的状态定义相关。例如&#xff1a;①处于“草稿”状态的…

微信开发工具构建npm and git切换分支

目录 git切换分支NPM构建 git切换分支 案例&#xff1a; 再次查看分支就会发现自己的分支已切换&#xff0c;然后需要重新构建NPM一次 NPM构建 记得安装一下这个&#xff0c;然后在构建 如果未安装NPM&#xff0c;这时候需要打开命令端&#xff0c;安装操作&#xff0c;操作…

ubuntu编写makefile编译c++程序

常见的编译工具 gcc/gvisual cclang 编译一个简单的程序 main.cpp #include <iostream>int main() {std::cout << "hello world" << std::endl;return 0; }gcc 编译 源文件&#xff08;.cpp&#xff09;编译生成目标文件&#xff08;.o&#xf…

GNOME 45 动态三层缓存补丁更新

导读GNOME 45 "Rīga" 上周已正式发布&#xff0c;此版本虽然有许多针对桌面环境的改进&#xff0c;但上游缺少的一个功能是 Canonical 主导的 Mutter 动态三层缓存。 动态三层缓存用于在需要时提升性能&#xff0c;并且已被证明有助于提高桌面渲染性能&#xff0c;…