当前位置: 首页 > news >正文

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.lryc.cn/news/383895.html

相关文章:

  • linux下docker安装与镜像容器管理
  • 【Unity】RPG2D龙城纷争(六)关卡编辑器之角色编辑
  • 【鸿蒙】鸿蒙的Stage和 FA 有什么区别
  • JAVA小知识29:IO流(上)
  • 大学生毕业季,寄物流快递避雷指南
  • 如何提高项目风险的处理效率?5个重点
  • ZNB40 矢量网络分析仪
  • ingress代理前后端服务跨域
  • Python 使用 Thick 方式连接 Oracle Database BaseDB 23ai
  • Java操作Redis(通过Jedis)
  • JVM专题二:Java如何进行编译的
  • 道路元素位置和方向的坐标系统: 点 线 面 连接点
  • 二、Docker常用命令
  • 通过docker启动Jenkins容器报错
  • webui automatic1111上可以跑stable diffusion 3的方法
  • 基于顺序表基础实现通讯录项目
  • 加班的员工,循环的电池
  • windows安装Nacos并使用
  • 准备篇(三)网页相关知识
  • 基于SSM的医药垃圾分类管理系统
  • web 应用防火墙的作用是什么
  • 搜索框回车刷新表格(解决搜索框回车刷新页面问题)
  • 洞察用户需求,Xinstall数据统计App让你的App运营如虎添翼
  • 如何正确的报考志愿
  • go的reflect实战
  • 【学习】常用的分类网络
  • 3. 向索引库中导入数据
  • java-冒泡排序 2
  • 记一次面试
  • Linux提升篇-正则表达式