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 19 Vue.js
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
vue使用require.context实现动态注册路由
Dec 25 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
vue修饰符.capture和.self的区别
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 基本语法格式
2009/12/15 PHP
PHP重定向的3种方式
2013/03/07 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
javascript 打印页面代码
2009/03/24 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
jquery马赛克拼接翻转效果代码分享
2015/08/24 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
python实现从ftp服务器下载文件的方法
2015/04/30 Python
Python中一行和多行import模块问题
2018/04/01 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
python英语单词测试小程序代码实例
2019/09/09 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
学校七一活动方案
2014/01/19 职场文书
职工趣味运动会方案
2014/02/10 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL
世界十大狙击步枪排行榜
2022/03/20 杂记