vue项目中封装element分页组件

我们都知道封装组件是为了方便在项目中使用,全局封装之后哪个模块使用直接复制就行了,分页在后台项目中用到的地方也是很多的,所以我们就全局封装一下分页组件,以后也方便在项目中使用,接下来封装的这个分页也是element-ui里最全的分页功能。

1. 封装分页组件

在components文件下创建 AllPagination文件夹,在 AllPagination文件夹下创建 AllPagination.vue文件与index.js文件

AllPagination.vue文件

<template><div class="l_pagination"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":page-size="paginationParameter.pageSize":current-page="paginationParameter.page":page-sizes="paginationParameter.pageSizes"layout="total, sizes, prev, pager, next, jumper":total="paginationParameter.total"></el-pagination></div>
</template>
<script>
export default {name: 'allPagination',props: {paginationParameter: {type: Object,default: () => {return ({pageSize: 20,page: 1,total: 0,pageSizes: [20, 50, 70],})}}},methods: {handleSizeChange(val) { // 返回当前的条数this.$emit('handleSizeChange', val)},handleCurrentChange(val) { // 返回当前的页数this.$emit('handleCurrentChange', val)}}
}
</script>
<style lang='scss'>
.l_pagination{width: 100%;height: 35px;margin-top: 20px;text-align: right;.el-pagination{font-size: 14px !important;color: #666666;.el-pagination__total{font-size: 14px !important;color: #666666;}.el-pagination__jump{font-size: 14px !important;}li{font-size: 14px !important;font-weight: normal;}}
}
</style>

index.js文件

import AllPagination from './AllPagination';export default {install(Vue) {Vue.component('AllPagination', AllPagination);}
};

main.js文件

在全局js文件中引入封装的分页组件并注册

import Vue from "vue";
import AllPagination from '@/components/AllPagination'; // 最全功能分页
Vue.use(AllPagination);

2. 使用分页组件

<template><AllPagination:paginationParameter="paginationParameter"@handleCurrentChange="handleCurrentChange"@handleSizeChange="handleSizeChange"/>
</template>
<script>data() {return {paginationParameter: {pageSize: 20, // 每页多少条page: 1, // 当前第几页total: 0, // 总条数pageSizes: ['20','50','100'] // 可以选择每页展示多少条},}},methods: {handleSizeChange(val) {this.paginationParameter.pageSize = val;this.$nextTick(() => {this.init();}); },handleCurrentChange(val) {this.paginationParameter.page = val;this.$nextTick(() => {this.init();});},}
</script>

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

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

相关文章

clean code-代码整洁之道 阅读笔记(第十四章)

第十四章 逐步改进——对一个命令行参数解析程序的案例研究 ps&#xff1a;本章设计代码示例所以篇幅会较长&#xff0c;推荐直接看原文&#xff0c;思路、代码讲解的很清楚 本章示例&#xff1a;解析命令行参数的工具 —— Args Args的简单用法 public static void main(Stri…

vue中动态绑定样式名的方式有几种?

在Vue中可以使用动态绑定样式名的方式有几种,具体取决于你的需求和使用的场景。 使用对象语法: 可以通过在data中定义一个变量,然后在模板中使用对象语法来动态绑定样式名。 <template><div :class="{ active: isActive }">Hello Vue!</div> &l…

网络文化经营许可证(文网文)办理全面讲解

随着互联网时代的飞速发展&#xff0c;互联网早已渗透到人们的生活中&#xff0c;各类直播、短视频成为大家生活娱乐必不可少的一部分。注册一家从事互联网行业的企业是一个不错的选择。那互联网企业需要办理什么证件资质呢&#xff1f;在互联网行业从事盈利文化活动必须持有网…

【精品方案】智能制造之路(93页PPT)

引言&#xff1a;智能制造之路&#xff1a;革新制造业的引领之旅 随着科技的迅猛发展&#xff0c;特别是人工智能、物联网、大数据等技术的不断进步&#xff0c;制造业正迎来一场深刻的变革。智能制造&#xff0c;作为这场变革的核心&#xff0c;正逐步成为推动产业升级和转型发…

MySQL为什么不建议使用多表JOIN

一、典型回答 之所以不建议使用JOIN查询&#xff0c;最主要的原因就是JOIN的效率比较低。 MySQL是使用了嵌套循环&#xff08;Nested-Loop Join&#xff09;的方式实现关联查询的&#xff0c;简单点说就是要通过两层循环&#xff0c;用第一张表做外循环&#xff0c;第二张表做内…

大模型课程资料-全网最火29套全栈大模型项目实践

29套AI全栈大模型项目实战&#xff0c;人工智能视频课程-多模态大模型&#xff0c;微调技术训练营&#xff0c;大模型多场景实战&#xff0c;AI图像处理&#xff0c;AI量化投资&#xff0c;OPenCV视觉处理&#xff0c;机器学习&#xff0c;Pytorch深度学习&#xff0c;推荐系统…

【LLM】一分钟带你了解Agent工作流四范式

文章目录 1. 大模型直接生成-generation2. 大模型充当工具使用-tool3. 大模型执行思维链-Planning4. 多大模型Agent合作-multiagent collaboration 1. 大模型直接生成-generation 通过提示词&#xff0c;大模型直接生成想要的结果&#xff1a; 2. 大模型充当工具使用-tool …

无人机在农业方面应用的局限性

无人机在农业方面的应用虽然带来了许多便利和效率提升&#xff0c;但也存在一些局限性。以下是对这些局限性的清晰归纳和分点表示&#xff1a; 飞行受限&#xff1a; 无人机在飞行过程中受到一定限制&#xff0c;例如在森林、城市等复杂地形或建筑物密集区域&#xff0c;其空间…

拥抱数字化未来,如何以费控驱动业务发展?

管理费用是企业运营中仅次于人力成本的第二大可控成本&#xff0c;一般会占到企业年度收入的5%—10%&#xff0c;但多数企业存在费用疏于管理、费用管理制度流于纸面难落地、费用浪费严重等问题。 如果不进行科学管理&#xff0c;有专家表示&#xff0c;估计企业每年至少有10%的…

vue总结

1.什么是VUE? Vue就是一套用于构建用户界面的渐进式框架,与其他框架不同的是,Vue被设计为可以自底向上逐渐应用.Vue的核心库只关注图层,不仅容易上手,还便于与第三方库或既有项目整合. 2.Vue的优点 体积小 高效率 双向数据绑定,简化Dom操作 通过MVVM思想实现数据的双向绑定…

Pixea Plus for Mac:图像编辑的极致体验

Pixea Plus for Mac 是一款专为 Mac 用户设计的强大图像编辑软件。凭借其卓越的性能和丰富的功能&#xff0c;它为用户带来了前所未有的图像编辑体验。无论是专业的设计师&#xff0c;还是业余的摄影爱好者&#xff0c;Pixea Plus 都能满足您对于图像编辑的各种需求。 Pixea P…

浏览器扩展V3开发系列之 chrome.cookies 的用法和案例

【作者主页】&#xff1a;小鱼神1024 【擅长领域】&#xff1a;JS逆向、小程序逆向、AST还原、验证码突防、Python开发、浏览器插件开发、React前端开发、NestJS后端开发等等 chrome.cookies API能够让我们在扩展程序中去操作浏览器的cookies。 在使用 chrome.cookies 要先声明…

软考系统架构师考试考点整理就看这一篇

软考系统架构师考试考点整理就看这一篇 最近软考成绩出来了不少同学与笔者沟通&#xff0c;聊到软考现在越来越难了&#xff0c;考了两三次都没过&#xff0c;也有不少新同学咨询软考考试的一些福利政策&#xff0c;投入大量的物力&#xff0c;财力&#xff0c;精力&#xff0c…

如何借助物联网实现土壤监测与保护

如何借助物联网实现土壤监测与保护 高标准农田信息化是指利用现代信息技术&#xff0c;如物联网、大数据、云计算等&#xff0c;对农田进行数字化、智能化的管理&#xff0c;以提高农田的生产效率和可持续发展能力。其中&#xff0c;土壤监测与保护是农田信息化的重要内容之一…

Vue3中根据select得选项值,改变当前元素同级下的子元素得disabled属性值

在 Vue 3 中,你通常不会直接通过类名(或任何其他 DOM 选择器)来获取 DOM 元素,因为 Vue 鼓励你使用数据驱动视图的方式来更新和操作元素。然而,如果你确实需要访问 DOM 元素(这通常是不推荐的,除非有特别的原因),你可以使用 Vue 3 的 ref 或者 refs(在模板中使用 ref…

Python 入门 —— 面向对象编程

Python 入门 —— 面向对象编程 面向对象编程是一种编程范式&#xff0c;通过将对象作为程序的基本单元&#xff0c;每个对象之间可以相互传递信息&#xff0c;并通过各自的方法对信息进行处理&#xff0c;从而达到程序处理的目的。 而面向过程编程则是将程序视为一系列顺序执…

低代码:释放企业创新力的钥匙

近年来&#xff0c;随着信息技术的不断发展&#xff0c;企业对于快速开发应用程序的需求越来越迫切。然而&#xff0c;传统的软件开发过程常常耗时费力&#xff0c;限制了企业的创新潜力。于是&#xff0c;低代码应运而生&#xff0c;成为解决开发难题的一把利器。 低代码开发…

你了解RabbitMQ、RocketMQ和Kafka吗?

是的&#xff0c;我了解 RabbitMQ、RocketMQ 和 Kafka。以下是对这三种消息队列系统的详细介绍&#xff1a; RabbitMQ 概念 RabbitMQ 是一个由 Pivotal 开发的开源消息代理&#xff0c;基于 AMQP&#xff08;Advanced Message Queuing Protocol&#xff09;协议。它支持多种…

智能聊天AI机器人网页怎么聊?这样做很简单

智能聊天AI机器人网页怎么聊&#xff1f;随着科技的飞速发展&#xff0c;智能聊天AI机器人已经逐渐渗透到我们的日常生活中&#xff0c;为我们提供了更加便捷、高效的交流方式。在网页上&#xff0c;这些智能聊天机器人以其独特的魅力&#xff0c;为我们打开了与机器对话的新世…

Epic商店登录时一直转圈圈怎么回事?Epic登录转圈圈解决办法

很多游戏玩家都喜欢在Epic商店上面免费领取游戏&#xff0c;但是经常在登陆领取的过程中&#xff0c;遇到Epic账号登陆不上的问题&#xff0c;登陆界面一直转圈圈&#xff0c;下面分享一下具体解决办法&#xff0c;帮助大家顺利流畅登陆&#xff0c;轻松喜加一。 如果遇到Epic商…