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 相关文章推荐
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
单击某一段文字改写文本颜色
Jun 06 Javascript
技术男用来对妹子表白的百度首页
Jul 23 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
Nuxt.js实战详解
Jan 18 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
js如何验证密码强度
Mar 18 Javascript
使用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
PHP源代码数组统计count分析
2011/08/02 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
详解Python中DOM方法的动态性
2015/04/11 Python
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
如何在python中执行另一个py文件
2020/04/30 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
《赠汪伦》教学反思
2014/04/12 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python