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 style 中visibility和display之间的区别
Jan 22 Javascript
javascript 防止刷新,后退,关闭
Aug 07 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
深入理解js promise chain
May 05 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 Javascript
Html中 IFrame的用法及注意点
Dec 22 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
angular2+node.js express打包部署的实战
Jul 27 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 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查询域名状态whois的类
2006/11/25 PHP
php数据库备份还原类分享
2014/03/20 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
Javascript 继承机制的实现
2009/08/12 Javascript
11款基于Javascript的文件管理器
2009/10/25 Javascript
Script的加载方法小结
2011/01/12 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
python中assert用法实例分析
2015/04/30 Python
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
python中PyQuery库用法分享
2021/01/15 Python
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
副厂长岗位职责
2014/02/02 职场文书
高中生操行评语
2014/04/25 职场文书
2014年个人售房协议书
2014/10/30 职场文书
六一晚会主持词开场白
2015/05/28 职场文书