1、首先需要在vue-cli项目中配置bootstrap,jquery
2、 然后新建vue文件,如index.vue，index.vue内容如下：
3、配置路由即可运行实现。
<template>
<div class="tTable container body-content">
<div class="form-group">
<div class="form-group">
<div class="page-header">
表格
</div>
<table class="table table-bordered table-responsive table-striped">
<thead>
<tr>
<th>时间</th>
<th>点击数</th>
<th>点击数</th>
</tr>
</thead>
<tbody>
<tr v-for="item in arrayData">
<td>{{item.timestamp}}</td>
<td>{{item.count}}</td>
<td>{{item.count}}</td>
</tr>
</tbody>
</table>
<div class="pager" id="pager">
<span class="form-inline">
<select class="form-control" v-model="pagesize" v-on:change="showPage(pageCurrent,$event,true)" number>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</span>
<span v-for="item in pageCount+1">
<span v-if="item==1" class="btn btn-default" v-on:click="showPage(1,$event)" :class="{'disabled':fDisabled}">
首页
</span>
<span v-if="item==1" class="btn btn-default" v-on:click="showPage(pageCurrent-1,$event)" :class="{'disabled':fDisabled}">
上一页
</span>
<span v-if="item==1" class="btn btn-default" v-on:click="showPage(item,$event)">
{{item}}
</span>
<span v-if="item==1&&item<showPagesStart-1" class="btn btn-default disabled">
...
</span>
<span v-if="item>1&&item<=pageCount-1&&item>=showPagesStart&&item<=showPageEnd&&item<=pageCount" class="btn btn-default" v-on:click="showPage(item,$event)">
{{item}}
</span>
<span v-if="item==pageCount&&item>showPageEnd+1" class="btn btn-default disabled">
...
</span>
<span v-if="item==pageCount" class="btn btn-default" v-on:click="showPage(item,$event)" >
{{item}}
</span>
