vue分頁(yè)組件table-pagebar使用實(shí)例解析
之前一直接觸都是原始的前端模型,jquery+bootstrap,冗雜的dom操作,繁瑣的更新綁定。接觸vue后,對(duì)前端MVVM框架有了全新的認(rèn)識(shí)。本文是基于webpack+vue構(gòu)建,由于之前的工作主要是基于java的服務(wù)端開(kāi)發(fā)工作,對(duì)前端框架和組件的理解,不夠深入,借此來(lái)記錄在前端框架使用和構(gòu)建中的點(diǎn)點(diǎn)滴滴。
此分頁(yè)組件參照于bootstrap-datatable底部分頁(yè)開(kāi)發(fā)完成,相關(guān)參數(shù)增加自定義功能。
最終使用展現(xiàn)效果圖如下,數(shù)據(jù)來(lái)源于cnodejs【https://cnodejs.org/】
底部分頁(yè)組件主要由左側(cè)當(dāng)前數(shù)據(jù)項(xiàng)數(shù)量顯示和右側(cè)分頁(yè)頁(yè)碼兩部分組成。組件代碼如下:
<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> 記錄/頁(yè),顯示第 {{start}} 至 {{end}} 項(xiàng)記錄,共 {{totalSize}} 項(xiàng) </div> </div> <div class="page-con"> <ul> <li><a v-on:click="firstClick()" v-bind:class="{ 'disabled': cur == 1}">首頁(yè)</a></li> <li><a v-on:click="preClick()" v-bind:class="{ 'disabled': cur == 1}">上一頁(yè)</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}">下一頁(yè)</a></li> <li><a v-on:click="lastClick()" v-bind:class="{ 'disabled': cur == totalPage}">尾頁(yè)</a></li> <li><a>共<i>{{totalPage}}</i>頁(yè)</a></li> </ul> </div> <div class="clear-both"></div> </div> </template> <script> import Ajax from '../ajax' export default{ props: ['page-model'], data () { return { // 初始頁(yè) cur: 1, // 請(qǐng)求地址 url: this.pageModel.url ? this.pageModel.url : "", // 請(qǐng)求參數(shù) param: this.pageModel.param ? this.pageModel.param : {}, // 請(qǐng)求方法 默認(rèn)為GET請(qǐng)求 method: this.pageModel.method ? this.pageModel.method : 'GET', // 每頁(yè)顯示數(shù)量 默認(rèn)每頁(yè)顯示10條 limit: this.pageModel.menu ? this.pageModel.menu[0] : 10, // 底部分頁(yè)基數(shù) 默認(rèn)5 perSize: this.pageModel.perSize ? this.pageModel.perSize : 5, // 每頁(yè)顯示數(shù)量 下拉選項(xiàng) menu: this.pageModel.menu ? this.pageModel.menu : [5, 10, 50], // 分頁(yè)參數(shù) 自定義名稱 pageParamName: this.pageModel.pageParamName ? this.pageModel.pageParamName : ['page', 'limit'], // 當(dāng)前列表顯示記錄起始數(shù) start: 0, // 當(dāng)前列表顯示記錄結(jié)束數(shù) end: 0, // 總頁(yè)數(shù) totalPage: 0, // 記錄總數(shù) totalSize: 0, // 分頁(yè)請(qǐng)求返回?cái)?shù)據(jù) dataList: [] } }, ready () { this.getData(); }, methods: { // 首頁(yè) firstClick: function () { if (this.cur > 1) { this.cur = 1; this.getData(); } }, // 尾頁(yè) lastClick: function () { if (this.cur < this.totalPage) { this.cur = this.totalPage; this.getData(); } }, // 上一頁(yè) preClick: function () { if (this.cur > 1) { this.cur--; this.getData(); } }, // 下一頁(yè) nextClick: function () { if (this.cur < this.totalPage) { this.cur++; this.getData(); } }, // 頁(yè)碼 pageClick: function (data) { if (data != this.cur) { this.cur = data; this.getData(); } }, // 刷新顯示記錄數(shù) 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; } }, // 分頁(yè)請(qǐng)求 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) { // 返回結(jié)果數(shù)據(jù)集 this.dataList = res.data; // 返回總記錄數(shù) _this.totalSize = 25; _this.totalPage = Math.ceil(_this.totalSize / _this.limit); _this.refreshPageCon(); _this.$dispatch('refresh', this.dataList); } }); }, // 每頁(yè)顯示記錄數(shù) 下拉 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; // 左側(cè)頁(yè)數(shù) leftPage = curPage - Math.floor(pageNum / 2); leftPage = leftPage > 1 ? leftPage : 1; // 右側(cè)頁(yè)數(shù) rightPage = curPage + Math.floor(pageNum / 2); rightPage = rightPage > totalPage ? totalPage : rightPage; var curPageNum = rightPage - leftPage + 1; // 左側(cè)調(diào)整 if (curPageNum < pageNum && leftPage > 1) { leftPage = leftPage - (pageNum - curPageNum); leftPage = leftPage > 1 ? leftPage : 1; curPageNum = rightPage - leftPage + 1; } // 右側(cè)調(diào)整 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>標(biāo)題</th> <th width="20%">發(fā)布時(shí)間</th> <th width="10%">作者</th> <th width="10%">回復(fù)數(shù)</th> <th width="10%">訪問(wèn)數(shù)</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">沒(méi)有匹配的記錄</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 {//這里是官方的寫(xiě)法,默認(rèn)導(dǎo)出,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前端組件學(xué)習(xí)教程》,歡迎大家學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程,請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于vue中標(biāo)簽的屬性綁定值渲染問(wèn)題
這篇文章主要介紹了關(guān)于vue中標(biāo)簽的屬性綁定值渲染問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06關(guān)于uniapp的高級(jí)表單組件mosowe-form
這篇文章主要介紹了關(guān)于uniapp的高級(jí)表單組件mosowe-form,由于一些表單標(biāo)簽改來(lái)改去比較繁瑣,重復(fù)性很多,且樣式布局啥的幾乎萬(wàn)變不離其中,為了偷懶,開(kāi)發(fā)了mosowe-form及mosowe-table兩款高級(jí)組件,需要的朋友可以參考下2023-04-04Vue3 響應(yīng)式數(shù)據(jù) reactive使用方法
這篇文章主要介紹了Vue3 響應(yīng)式數(shù)據(jù) reactive使用方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11vue實(shí)現(xiàn)滾動(dòng)條到頂部或者到指定位置
這篇文章主要介紹了vue實(shí)現(xiàn)滾動(dòng)條到頂部或者到指定位置,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08Vue中失去焦點(diǎn)時(shí)所觸發(fā)的事件問(wèn)題
這篇文章主要介紹了Vue中失去焦點(diǎn)時(shí)所觸發(fā)的事件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06element-ui配合node實(shí)現(xiàn)自定義上傳文件方式
這篇文章主要介紹了element-ui配合node實(shí)現(xiàn)自定義上傳文件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09Vue如何用this.$set改變數(shù)組里的某個(gè)值
這篇文章主要介紹了Vue用this.$set改變數(shù)組里的某個(gè)值,文中通過(guò)示例代碼介紹了vue中this.$set()的用法----更新數(shù)組和對(duì)象的值,需要的朋友可以參考下2022-12-12Element通過(guò)v-for循環(huán)渲染的form表單校驗(yàn)的實(shí)現(xiàn)
日常業(yè)務(wù)開(kāi)發(fā)中,form表單校驗(yàn)是一個(gè)很常見(jiàn)的問(wèn)題,本文主要介紹了Element通過(guò)v-for循環(huán)渲染的form表單校驗(yàn)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04vue-cli項(xiàng)目中使用公用的提示彈層tips或加載loading組件實(shí)例詳解
這篇文章主要介紹了vue-cli項(xiàng)目中使用公用的提示彈層tips或加載loading組件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-05-05