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 "",
 // 请求参数
 param: this.pageModel.param "../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>