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中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
vue完美实现el-table列宽自适应
May 08 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
vue中data里面的数据相互使用方式
Jun 05 Vue.js
Vue深入理解插槽slot的使用
Aug 05 Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 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/06 PHP
php防止用户重复提交表单
2015/11/02 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
基于jquery实现最简单的选项卡切换效果
2016/05/08 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
2018/04/23 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
简单两步使用node发送qq邮件的方法
2019/03/01 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
星球大战与Python之间的那些事
2016/01/07 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
Python发展简史 Python来历
2019/05/14 Python
python数值基础知识浅析
2019/11/19 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
员工拾金不昧表扬信
2014/01/09 职场文书
庆元旦文艺演出主持词
2014/03/27 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
2015新年寄语大全
2014/12/08 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL
Windows server 2016服务器基本设置
2022/08/14 Servers