在自学vue后做表格数据时,需要做一个分页器来进行对分页数据的查询,所以自己做了一个简易的分页器
样式如下
此时来说一下分页器的实现
HTML
<template>
<div class="container">
<ul class="pager">
<div class="page-size">当前位置:第{
{postData.pageNo}}页</div>
<li v-bind:class="{disabled:this.homePage}" @click="firstpage"><a href="#">首页</a></li>
<li v-bind:class="{disabled:this.homePage}" @click="backpage"><a href="#">上一页</a>
</li>
<!-- middlePage :start-->
<li v-for="(item, index) in pages" :key="index">
<a v-if="item=='...'">
{
{item}}
</a>
<a v-if="item!='...'" @click="jumppage(item)">
{
{item}}
</a>
</li>
<!-- middlePage :end -->
<li v-bind:class="{disabled:this.endPage}" @click="nextpage"><a href="#">下一页</a></li>
<li v-bind:class="{disabled:this.endPage}" @click="lastpage"><a href="#">尾页</a>
</li>
<li>
<select class="form-control mb-3" @change="pagesize" v-model="record">
<option value="5">5条/页</option>
<option value="10">10条/页</option>
<option value="15">15条/页</option>
<option value="20">20条/页</option>
</select>
</li>
<li>
跳转到 <input type="text" class="form-control" style="width: 50px;" v-model="specifyPage"> 页
<butt