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动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
vue 动态生成拓扑图的示例
Jan 03 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 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
大师制作的中短波矿石收音机
2020/04/02 无线电
PHP DataGrid 实现代码
2009/08/12 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
使用JavaScript进行表单校验功能
2017/08/01 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
python连接池实现示例程序
2013/11/26 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
Python常见数据类型转换操作示例
2019/05/08 Python
Django logging配置及使用详解
2019/07/23 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
文艺委员竞选稿
2015/11/19 职场文书
世界文化遗产导游词
2019/08/07 职场文书
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python