vue前端模拟简单的分页

最新推荐文章于 2024-08-01 17:00:44 发布

姜无忧

最新推荐文章于 2024-08-01 17:00:44 发布

阅读量3.8k

点赞数 2

分类专栏： vuejs

本文链接：https://blog.csdn.net/xiasohuai/article/details/80720586

版权

vuejs 专栏收录该内容

140 篇文章 5 订阅

订阅专栏

<Table border :columns="fieldColumns" :data="fieldData2" height='500'></Table><!--表格自己写，这里暂时用iview的表格模拟一下-->
       <!--分页-->
       <div class="result-foot">
           <ul class="ul" style="">
              <!--上一页-->
              <li class="disabled" v-if="pageindex == 1"><a href="javascript:;"><</a></li>
              <li v-else v-on:click="LoadData(pageindex-1)"><a href="javascript:;" ><</a></li>      
              <!--页码-->
              <li v-for="n in totalpages" v-bind:class="pageindex == n ? 'active':''" v-on:click="LoadData(n)">
                   <a href="#"  v-text="n"></a>
              </li>
              <!--下一页-->
              <li class="disabled" v-if="pageindex == totalpages || totalpages == 0"><a href="javascript:;">></a></li>
              <li  v-else v-on:click="LoadData(pageindex+1)"><a href="javascript:;" >></a></li>                              
            </ul>
         </div>

data中定义

fieldColumns:[],//列表表头
fieldData:[],//接收后端的所有数据
total:0,//获取后端的数据总条数
pagesize:10,//一页显示10条
pageindex:1,//当前页
fieldData2:[]//前端模拟后每一页显示的数据


computed: {
       totalpages: function () {//总页数
            return Math.ceil(this.total * 1 / this.pagesize);
       }
 },

获取后端数据，并调用前端分页方法

getData(){
      axios.get(this.GLOBAL.API_datasource+"datasource/"+id+"/sql/field").then(res=>{
           if(res.data.retCode == "200"){
               this.fieldData = res.data.data;//从后端接收所有的数据
               this.total= res.data.data.length;//前端加分页————获取数据总条数
               this.LoadData(1);//前端加分页————加载第一个数据
           }else{
               alert(res.data.message) 
           }  
      })
}

//前端加分页调用的方法
LoadData(value){
    this.pageindex=value
    this.fieldData2=this.fieldData.slice((value-1)*10,value*10)
    console.log('总页数：',this.totalpages)
    console.log('截取的数据：',this.fieldData2)
    console.log('当前页：',value)
 }

css样式

<style>
.result-foot{float:right;}
.active {background:#2d8cf0;}
.active a{color:#fff !important;}
.ul {list-style:none;margin:20px;} 
.ul li {float:left;line-height:28px;width:30px;border:1px solid #ccc;border-radius: 4px;height:30px;text-align:center;margin:5px}
.ul li.disabled{color:#333} 
.ul li a{color:#333} 
</style>