重庆分公司

重庆分公司

028-86922220

vue2.0与bootstrap3如何实现列表分页效果

小编给大家分享一下vue2.0与bootstrap3如何实现列表分页效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

我们提供的服务有：网站设计、成都网站制作、微信公众号开发、网站优化、网站认证、哈巴河ssl等。为超过千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的哈巴河网站制作公司

具体内容如下



  
    
    使用vue2.0与bootstrap3进行简单列表分页
    
    
  
  

    
      
        
          
            #
            名称
            操作
          
        
        
          0" v-for="item in listData">
            {{item.id}}
            {{item.name}}
            
              编辑
              删除
            
          
          
            
              
                  
                    
                      
                        共{{pageData.total}}条，当前显示第
                        
                        {{pageData.itemStart}}
                        {{pageData.itemStart}}-{{pageData.itemEnd}}
                        条

首页

首页上一页

上一页 5 && pageData.curPage > 3" class="next disabled"> ...

{{pageItem}}

{{pageItem}} 5 && pageData.curPage < pageData.totalPage-2" class="next disabled"> ...

下一页

下一页末页

末页 5" class="next disabled">

Go

function getData($page,$pageSize){//获取数据，可使用各种语言替换^_^ var $data = []; for (var $i=($page-1)*$pageSize+1; $i <=$page*$pageSize ; $i++) { $data.push( { id:$i, name:'name'+$i }); } var $returnData = {'data':$data,'total':103}; return $returnData; } var vm = new Vue({ el: '#table', data: { listData:[], page: 1,//当前页码 pageSize: 10,//每页条数 total:0,//总数 pageData: { curPage: 1, pageSize: 10, total: 0, totalPage: 0, pageIndex: [], itemStart: 0, itemEnd: 0 } }, methods:{ listItems: function () {//列出需要的数据 var returnData =getData(this.page,this.pageSize); this.listData = returnData.data; this.total=returnData['total']; this.setPageList(this.total, this.page, this.pageSize); }, editItem:function ($id) {//编辑操作在这儿哟 alert('编辑第'+$id+'条数据！'); }, deleteItem:function ($id) {//这里可以删除数据 alert('删除第'+$id+'条数据！'); }, setPageList: function (total, page, pageSize) { total = parseInt(total); var curPage = parseInt(page); pageSize = parseInt(pageSize); var totalPage = Math.ceil(total / pageSize); var itemStart = (curPage - 1) * pageSize + 1; if (curPage == totalPage) { itemEnd = total; } else { itemEnd = curPage * pageSize; } var pageIndex = []; if (curPage >= 1 && curPage <= totalPage) { if (totalPage < 5) {//5页以内 for (var $i = 1; $i <= totalPage; $i++) { pageIndex.push($i); } } else {//大于5页 if (curPage == 1) { pageIndex = [curPage, curPage + 1, curPage + 2, curPage + 3, curPage + 4]; } else if (curPage == 2) { pageIndex = [curPage - 1, curPage, curPage + 1, curPage + 2, curPage + 3]; } else if (curPage == totalPage - 1) { pageIndex = [curPage - 3, curPage - 2, curPage - 1, curPage, totalPage]; } else if (curPage == totalPage) { pageIndex = [curPage - 4, curPage - 3, curPage - 2, curPage - 1, curPage]; } else { pageIndex = [curPage - 2, curPage - 1, curPage, curPage + 1, curPage + 2]; } } } this.pageData.curPage = curPage; this.pageData.pageSize = pageSize; this.pageData.total = total; this.pageData.totalPage = totalPage; this.pageData.pageIndex = pageIndex; this.pageData.itemStart = itemStart; this.pageData.itemEnd = itemEnd; }, changeCurPage: function (page, pageSize) {//换页 this.page = page; this.pageSize = pageSize; this.listItems(); }, goPage: function (pageSize, totalPage) {//跳转页 var pageIndex = this.$refs.goPage.value; if (pageIndex <= 0) { pageIndex = 1; this.$refs.goPage.value = 1; } else if (pageIndex >= totalPage) { pageIndex = totalPage; this.$refs.goPage.value = totalPage; } this.changeCurPage(pageIndex, pageSize); } } }); window.onload = function(){ console.log('Hello World!'); vm.listItems(); };

以上是“vue2.0与bootstrap3如何实现列表分页效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

网站栏目：vue2.0与bootstrap3如何实现列表分页效果
标题网址：http://cxhlcq.com/article/ghedog.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220（工作日）

18980820575（7×24）

提交需求

返回顶部