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项目利用axios请求接口下载excel
Nov 17 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
详解Vue的options
May 15 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
vue实现登陆页面开发实践
May 30 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分页函数
2006/07/08 PHP
一个基于PDO的数据库操作类
2011/03/24 PHP
php笔记之:数据类型与常量的使用分析
2013/05/14 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
window.opener用法和用途实例介绍
2013/08/19 Javascript
JS delegate与live浅析
2013/12/21 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
jQuery中andSelf()方法用法实例
2015/01/08 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
浅谈scrapy 的基本命令介绍
2017/06/13 Python
基于python socketserver框架全面解析
2017/09/21 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
详解Python3 基本数据类型
2019/04/19 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
python设置环境变量的作用和实例
2019/07/09 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
SQL Server数据库笔试题和答案
2016/02/04 面试题
介绍下static、final、abstract区别
2015/01/30 面试题
养殖项目策划书范文
2014/01/13 职场文书
打架检讨书300字
2014/02/02 职场文书
会计求职信怎么写
2015/03/20 职场文书
中学社团活动总结
2015/05/07 职场文书