vue项目中实现分页效果,供大家参考,具体内容如下
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.js组件学习教程、Vue.js前端组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持站长技术。
生成.bmp格式的文件 .bmp格式的图片是未压缩的图片,相比于.raw格式,需要加上头...
前提 在讲述这两个握手时候,有一些东西需要提前说明。 HTTP与TCP/IP区别? TPC/...
你的J2EE应用是不是运行的很慢?它们能不能承受住不断上升的访问量?本文讲述了...
本文实例为大家分享了js+canvas实现验证码的具体代码,供大家参考,具体内容如下...
测了一次tcp syncookie的抗D性能发现了一件有趣的事情周末写一篇随笔出来。 请看...
春招总结 个人情况双非科班大三下、熟悉C、部分C#、unity自学一个月水平、计算机...
Windows 10一路狂飙,运行它的设备也是越来越多。 据外媒报道称,微软透露的情况...
正则表达式,又称正规表示法、常规表示法。(英语:Regular Expression,在代码...
无论是使用ajax还是使用easyui等框架,后台向前台输出数据时都涉及到json处理的...
(1)利用PROCEDURE ANALYSE()优化表的数据类型 1)场景分析 有时候,我们在定义...