Vue Cli与BootStrap结合实现表格分页功能

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>
            <span v-if="item==pagecount" class="btn btn-default" v-on:click="showpage(pagecurrent+1,$event)" :class="{'disabled':ldisabled}">
              下一页
            </span>
            <span v-if="item==pagecount" class="btn btn-default" v-on:click="showpage(pagecount,$event)" :class="{'disabled':ldisabled}">
              尾页
            </span>
          </span>
          <span>{{pagecurrent}}/{{pagecount}}</span>
        </div>
      </div>
    </div>
  </div>
 </template>
 <script >
 export default {
  data(){
    return{
         //为第一页或者最后一页时，首页，尾页不能点击
        fdisabled:false,
        ldisabled:false,
         //总项目数
        totalcount: 200,
        //分页数
        pagecount: 20,
        //当前页面
        pagecurrent: 1,
        //分页大小
        pagesize: 10,
        //显示分页按钮数
        showpages: 11,
        //开始显示的分页按钮
        showpagesstart: 1,
        //结束显示的分页按钮
        showpageend: 100,
        //分页数据
        arraydata: []
    }
  },
  methods:{
    showpage(pageindex, $event, forcerefresh){
      if (pageindex > 0) {
        if (pageindex > this.pagecount) {
          pageindex = this.pagecount;
        }
        //判断数据是否需要更新
        var currentpagecount = math.ceil(this.totalcount / this.pagesize);
        if (currentpagecount != this.pagecount) {
          pageindex = 1;
          this.pagecount = currentpagecount;
        }
        else if (this.pagecurrent == pageindex && currentpagecount == this.pagecount && typeof (forcerefresh) == "undefined") {
          console.log("not refresh");
          return;
        }
        //处理分页点中样式
        var buttons = $("#pager").find("span");
        for (var i = 0; i < buttons.length; i++) {
          if (buttons.eq(i).html() != pageindex) {
            buttons.eq(i).removeclass("active");
          }
          else {
            buttons.eq(i).addclass("active");
          }
        }
        //测试数据 随机生成的
        var newpageinfo = [];
        var time=new date();
        for (var i = 0; i < this.pagesize; i++) {
          newpageinfo[newpageinfo.length] = {
            timestamp: time,
            count: (i + (pageindex - 1) * 20)
          };
        }
        this.pagecurrent = pageindex;
        this.arraydata = newpageinfo;
        //如果当前页首页或者尾页，则上一页首页就不能点击，下一页尾页就不能点击
         if(this.pagecurrent===1){
            this.fdisabled=true;
          }else if(this.pagecurrent===this.pagecount){
            this.ldisabled=true;
          }else{
             this.fdisabled=false;
             this.ldisabled=false;
          }
        //计算分页按钮数据
        if (this.pagecount > this.showpages) {
          if (pageindex <= (this.showpages - 1) / 2) {
            this.showpagesstart = 1;
            this.showpageend = this.showpages - 1;
            console.log("showpage1")
          }
          else if (pageindex >= this.pagecount - (this.showpages - 3) / 2) {
            this.showpagesstart = this.pagecount - this.showpages + 2;
            this.showpageend = this.pagecount;
            console.log("showpage2")
          }
          else {
            console.log("showpage3")
            this.showpagesstart = pageindex - (this.showpages - 3) / 2;
            this.showpageend = pageindex + (this.showpages - 3) / 2;
          }
        }
        console.log("showpagesstart:" + this.showpagesstart + ",showpageend:" + this.showpageend + ",pageindex:" + pageindex);
      }
    }
  },
  mounted(){
    this.showpage(this.pagecurrent, null, true);
  },
  computed:{
  }
}
 </script>

总结

以上所述是小编给大家介绍的vue cli与bootstrap结合实现表格分页功能，希望对大家有所帮助