vue分页组件table-pagebar使用实例解析


Posted in Javascript onNovember 15, 2020

之前一直接触都是原始的前端模型,jquery+bootstrap,冗杂的dom操作,繁琐的更新绑定。接触vue后,对前端MVVM框架有了全新的认识。本文是基于webpack+vue构建,由于之前的工作主要是基于java的服务端开发工作,对前端框架和组件的理解,不够深入,借此来记录在前端框架使用和构建中的点点滴滴。

此分页组件参照于bootstrap-datatable底部分页开发完成,相关参数增加自定义功能。

最终使用展现效果图如下,数据来源于cnodejs【https://cnodejs.org/】 

vue分页组件table-pagebar使用实例解析

底部分页组件主要由左侧当前数据项数量显示和右侧分页页码两部分组成。组件代码如下: 

<template xmlns:v-on="http://www.w3.org/1999/xhtml"
 xmlns:v-bind="http://www.w3.org/1999/xhtml">
 <div class="page-bar">
 <div class="page-size">
 <div>
 <select v-on:change="menuChange()" v-model="limit">
 <option v-for="item in menu" v-bind:value="item">{{item}}</option>
 </select>
 记录/页,显示第 {{start}} 至 {{end}} 项记录,共 {{totalSize}} 项
 </div>
 </div>
 <div class="page-con">
 <ul>
 <li><a v-on:click="firstClick()" v-bind:class="{ 'disabled': cur == 1}">首页</a></li>
 <li><a v-on:click="preClick()" v-bind:class="{ 'disabled': cur == 1}">上一页</a></li>
 <li v-for="per in pages" v-bind:class="{ 'active': cur == per}">
 <a v-on:click="pageClick(per)">{{ per }}</a>
 </li>
 <li><a v-on:click="nextClick()" v-bind:class="{ 'disabled': cur == totalPage}">下一页</a></li>
 <li><a v-on:click="lastClick()" v-bind:class="{ 'disabled': cur == totalPage}">尾页</a></li>
 <li><a>共<i>{{totalPage}}</i>页</a></li>
 </ul>
 </div>
 <div class="clear-both"></div>
 </div>
</template>

<script>
 import Ajax from '../ajax'

 export default{
 props: ['page-model'],
 data () {
 return {
 // 初始页
 cur: 1,
 // 请求地址
 url: this.pageModel.url ? this.pageModel.url : "",
 // 请求参数
 param: this.pageModel.param ? this.pageModel.param : {},
 // 请求方法 默认为GET请求
 method: this.pageModel.method ? this.pageModel.method : 'GET',
 // 每页显示数量 默认每页显示10条
 limit: this.pageModel.menu ? this.pageModel.menu[0] : 10,
 // 底部分页基数 默认5
 perSize: this.pageModel.perSize ? this.pageModel.perSize : 5,
 // 每页显示数量 下拉选项
 menu: this.pageModel.menu ? this.pageModel.menu : [5, 10, 50],
 // 分页参数 自定义名称
 pageParamName: this.pageModel.pageParamName ? this.pageModel.pageParamName : ['page', 'limit'],
 // 当前列表显示记录起始数
 start: 0,
 // 当前列表显示记录结束数
 end: 0,
 // 总页数
 totalPage: 0,
 // 记录总数
 totalSize: 0,
 // 分页请求返回数据
 dataList: []
 }
 },
 ready () {
 this.getData();
 },
 methods: {
 // 首页
 firstClick: function () {
 if (this.cur > 1) {
 this.cur = 1;
 this.getData();
 }
 },
 // 尾页
 lastClick: function () {
 if (this.cur < this.totalPage) {
 this.cur = this.totalPage;
 this.getData();
 }
 },
 // 上一页
 preClick: function () {
 if (this.cur > 1) {
 this.cur--;
 this.getData();
 }
 },
 // 下一页
 nextClick: function () {
 if (this.cur < this.totalPage) {
 this.cur++;
 this.getData();
 }
 },
 // 页码
 pageClick: function (data) {
 if (data != this.cur) {
 this.cur = data;
 this.getData();

 }
 },
 // 刷新显示记录数
 refreshPageCon: function () {
 this.start = (this.cur - 1) * this.limit + 1;
 if (this.totalSize >= this.limit * this.cur) {
 this.end = this.limit * this.cur;
 } else {
 this.end = this.totalSize;
 }
 },
 // 分页请求
 getData: function () {
 let _this = this;
 this.param[this.pageParamName[0]] = this.cur;
 this.param[this.pageParamName[1]] = this.limit;
 Ajax({
 url: _this.url,
 method: _this.method,
 data: _this.param,
 callback: function (res) {
 // 返回结果数据集
 this.dataList = res.data;
 // 返回总记录数
 _this.totalSize = 25;

 _this.totalPage = Math.ceil(_this.totalSize / _this.limit);
 _this.refreshPageCon();
 _this.$dispatch('refresh', this.dataList);
 }
 });
 },
 // 每页显示记录数 下拉
 menuChange: function () {
 this.getData();
 },
 getPage: function (curPage, totalPage, pageNum) {
 var leftPage, rightPage;
 curPage = curPage > 1 ? curPage : 1;
 curPage = curPage > totalPage ? totalPage : curPage;
 totalPage = curPage > totalPage ? curPage : totalPage;
 // 左侧页数
 leftPage = curPage - Math.floor(pageNum / 2);
 leftPage = leftPage > 1 ? leftPage : 1;

 // 右侧页数
 rightPage = curPage + Math.floor(pageNum / 2);
 rightPage = rightPage > totalPage ? totalPage : rightPage;

 var curPageNum = rightPage - leftPage + 1;
 // 左侧调整
 if (curPageNum < pageNum && leftPage > 1) {
 leftPage = leftPage - (pageNum - curPageNum);
 leftPage = leftPage > 1 ? leftPage : 1;
 curPageNum = rightPage - leftPage + 1;
 }

 // 右侧调整
 if (curPageNum < pageNum && rightPage < totalPage) {
 rightPage = rightPage + (pageNum - curPageNum);
 rightPage = rightPage > totalPage ? totalPage : rightPage;
 }

 var arr = [];
 for (var i = leftPage; i <= rightPage; i++) {
 arr.push(i);
 }
 return arr;
 }
 },
 computed: {
 pages: function () {
 return this.getPage(this.cur, this.totalPage, this.perSize);
 }
 }
 }
</script>

<style>
 ul, li {
 margin: 0px;
 padding: 0px;
 }

 li {
 list-style: none;
 display: inline;
 }

 .page-bar li:first-child > a {
 margin-left: 0px
 }

 .page-bar a {
 border: 1px solid #ddd;
 text-decoration: none;
 position: relative;
 float: left;
 padding: 6px 12px;
 margin-left: -1px;
 line-height: 1.42857143;
 color: #337ab7;
 cursor: pointer;
 }

 .page-bar a:hover {
 background-color: #eee;
 }

 .page-bar .active a {
 color: #fff;
 cursor: default;
 background-color: #337ab7;
 border-color: #337ab7;
 }

 .page-bar i {
 font-style: normal;
 color: #d44950;
 margin: 0px 4px;
 font-size: 12px;
 }

 .page-bar .page-con, .page-size {
 width: 50%;
 display: block;
 height: 30px;
 float: left;
 line-height: 30px;
 }

 .page-bar .page-con ul {
 float: right;
 padding-left: 15px;
 padding-right: 15px;
 display: inline-block;
 padding-left: 0;
 }

 .page-bar .page-size div {
 padding-left: 15px;
 padding-right: 15px;
 font-size: 14px;
 }

 a.disabled {
 color: #777;
 background-color: #fff;
 border-color: #ddd;
 cursor: not-allowed;
 }

 a.disabled:hover {
 background-color: #fff;
 }

 .clear-both {
 clear: both;
 }

 select {
 border: solid 1px #ddd;
 appearance: none;
 -moz-appearance: none;
 -webkit-appearance: none;
 background: url("../assets/images/arrow.png") no-repeat scroll right center transparent;
 padding-right: 15px;
 padding-left: 15px;
 padding-top: 2px;
 padding-bottom: 2px;
 }

 select::-ms-expand {
 display: none;
 }
</style>

组建模块使用, 

<template>
 <Navbar></Navbar>
 <div class="row">
 <table class="table">
 <thead>
 <tr>
 <th>标题</th>
 <th width="20%">发布时间</th>
 <th width="10%">作者</th>
 <th width="10%">回复数</th>
 <th width="10%">访问数</th>
 </tr>
 </thead>
 <tbody>
 <tr v-show="!tabelEmpty" v-for="item in dataList">
 <td>{{item.title}}</td>
 <td>{{item.create_at}}</td>
 <td>{{item.author.loginname}}</td>
 <td>{{item.reply_count}}</td>
 <td>{{item.visit_count}}</td>
 </tr>
 <tr v-show="tabelEmpty" class="empty">
 <td colspan="5">没有匹配的记录</td>
 </tr>
 </tbody>
 </table>
 </div>
 <Pagebar :page-model="pageModel"></Pagebar>
</template>
<script>
 import Navbar from '../components/navbar.vue'
 import Pagebar from '../components/table-pagebar.vue'

 export default {//这里是官方的写法,默认导出,ES6
 components: {
 Navbar,
 Pagebar
 },
 data () {
 return {
 allArticle: "",
 dataList: [],
 pageModel: {
 url: 'https://cnodejs.org/api/v1/topics',
 menu: [5, 10, 20]
 },
 }
 },
 computed: {
 tabelEmpty: function () {
 if (this.dataList) {
 return false;
 } else {
 return true;
 }
 }
 },
 events: {
 refresh: function (e) {
 this.dataList = e;
 }
 }
 }
</script>
<style>
 body, table {
 font-size: 12px;
 }

 table {
 table-layout: fixed;
 empty-cells: show;
 border-collapse: collapse;
 width: 100%;
 margin: 10px 0;
 }

 td {
 height: 30px;
 }

 div.row {
 margin-left: 15px;
 margin-right: 15px;
 }

 h1, h2, h3 {
 font-size: 12px;
 margin: 0;
 padding: 0;
 }

 .table {
 border: 1px solid #ddd;
 background: #fff;
 }

 .table thead tr {
 background: #eee;
 }

 .table th {
 background-repeat: repeat-x;
 height: 30px;
 text-align: left;
 vertical-align: middle;
 }

 .table tr.empty {
 text-align: center;
 }

 .table td, .table th {
 border: 1px solid #ddd;
 padding: 0 1em 0;
 }

 .table tr:nth-child(odd) td {
 background-color: #f5f5f5;

 }
</style>

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS的反射问题
Apr 07 Javascript
jQuery实现的立体文字渐变效果
May 17 Javascript
JavaScript格式化数字的函数代码
Nov 30 Javascript
jquery 图片上传按比例预览插件集合
May 28 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
jQuery打字效果实现方法(附demo源码下载)
Dec 18 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
angular select 默认值设置方法
Jun 23 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
Javascript Worker子线程代码实例
Feb 20 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
使用BootStrap实现用户登录界面UI
Aug 10 #Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 #Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 #Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 #Javascript
JS获取鼠标选中的文字
Aug 10 #Javascript
浅析JavaScript函数的调用模式
Aug 10 #Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 #Javascript
You might like
德劲1103的维修打理经验
2021/03/02 无线电
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
JS 遮照层实现代码
2010/03/31 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
JSON取值前判断
2014/12/23 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
python使用socket进行简单网络连接的方法
2015/04/29 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
HTML5中使用json对象的实例代码
2018/09/10 HTML / CSS
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
小学生自我评价范例
2013/09/24 职场文书
医学检验专业大学生求职信
2013/11/18 职场文书
口头翻译求职人自荐信
2013/12/07 职场文书
公司经理聘任书
2014/03/29 职场文书
五一劳动节活动总结
2015/02/09 职场文书
大学生军训感言
2015/08/01 职场文书
青年教师听课心得体会
2016/01/15 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS