vue项目实现分页效果


Posted in Vue.js onMarch 24, 2021

1.这里我们使用element-ui来实现,先使用npm安装

npm i element-ui -S

2.在main.js中全局引入

import ElementUI from "element-ui"
import 'element-ui/lib/theme-chalk/index.css'
 
Vue.use(ElementUI) //将element-ui挂在到全局

3.封装组件

<template>
 <div class="block">
 <el-pagination
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-size="6"   
  layout="prev, pager, next, jumper"
  :total="total"
  :pager-count="5"
 >
 </el-pagination>
 </div>
</template>
 
<script>
export default {
 props: ["num", "page"], //传入的总条数,和页码
 data() {
 return {};
 },
 computed: {
 currentPage: function() {
  return this.page;
 },
 total: function() {
  return this.num;
 }
 },
 methods: {
 handleSizeChange(val) {
  this.$emit("size-change", val);
 },
 handleCurrentChange(val) {
  this.$emit("current-change", val);
 }
 }
};
</script>
 
<style>
.block {
 text-align: right;
 /* width: 100%; */
}
</style>

4.引入组件并使用

<template>
 <div class="mobild">
  <div>
  <ATablePaging
   :num="num"
   :page="page"
   @current-change="(val) => { 
   page = val;
   list();
   }"
  ></ATablePaging>
  </div>
 </div>
</template>
 
<script>
import ATablePaging from "../paging"; //引入分页组件
export default {
 data() {
 return {
  page:"", //当前页码
  num: 1, //内容总条数
 };
 },
 methods: {
 list() {
  //发送的http请求 
  //后端返回的总页数等于num
 },
 },
 mounted() {
 this.news();
 },
 components: {
 ATablePaging
 }
};
</script>
 
<style scoped>
</style>

 

Vue.js 相关文章推荐
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
vue实现倒计时功能
Mar 24 #Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 #Vue.js
使用Vue.js和MJML创建响应式电子邮件
vue+flask实现视频合成功能(拖拽上传)
Mar 04 #Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 #Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 #Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 #Vue.js
You might like
探讨:如何编写PHP扩展
2013/06/13 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
2014/12/31 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
深入探讨前端框架react
2015/12/09 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
曼城官方网上商店:Manchester City
2019/09/10 全球购物
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
车队司机自我鉴定
2014/03/02 职场文书
建筑安全生产责任书
2014/07/22 职场文书
电话客服工作职责
2014/07/27 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
安全生产先进个人总结
2015/02/15 职场文书
2016年校长新年寄语
2015/08/17 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang