资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

使用vue.js组件怎么实现一个分页效果

使用vue.js组件怎么实现一个分页效果？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

在禹会等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都网站制作、成都网站设计、外贸营销网站建设 网站设计制作按需定制,公司网站建设,企业网站建设,成都品牌网站建设,网络营销推广,成都外贸网站建设,禹会网站建设费用合理。

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

html内容




 
 
  CommonTest
 


 
 

 
vue.js组件分页效果

 

 
 
 
   
 

© 2017 - 易兒善

 
 

javascript内容


 
 

com.js组件内容

var pager = {
 props: {
 pagerData:{
 type: Object,
 default:function(){
 return{
  data:[],
  rows:[],
  page:{
  //分页大小
  pagesize:20,
  //分页数
  arrPageSize:[10,20,30,40],
  //当前页面
  pageCurrent:1,
  //总分页数
  pageCount:1,
  //总数
  totalCount:10
  }
 }
 }

 }
 },
 template: '\
  \
  {{item.label}}\
  \
  \
  {{dataItem[item.name]}}\
  \
 \
 \
  \
  \
  {{item}}\
  \
  \
  首页\
  上一页\
  \
  \
  \
  共{{pagerData.page.pageCount}}页\
  下一页\
  尾页\
  共{{pagerData.page.totalCount}}条数据，当前显示第{{startData}}-{{endData}}条记录\
 
',  data:function(){return{  mypagesize:10,  mypageCurrent:1,  sortparam:"",  sorttype:1,  }},  //计算属性  computed:{  // 分页大小 获取的时候显示父级传入的，修改的时候修改自身的。子组件不能修改父元素的值  pagesize:{  get:function(){  return this.pagerData.page.pagesize;  },  set:function(value){  this.mypagesize = value;  }  },  pageCurrent:{  get:function(){  return this.pagerData.page.pageCurrent;  },  set:function(value){  this.mypageCurrent = value;  }  },  startData:function(){  return this.pagerData.page.pagesize*(this.pagerData.page.pageCurrent-1)+1;  },  endData:function(){  var max =this.pagerData.page.pagesize*this.pagerData.page.pageCurrent;  return max>this.pagerData.page.totalCount?this.pagerData.page.totalCount:max;  }  },  methods:{  showPage: function (pageIndex, $event) {   if (pageIndex > 0) {   if(pageIndex>this.pagerData.page.pageCount) pageIndex = this.page.pageCount;   this.$emit('show-page',{pageCurrent:pageIndex,pagesize:this.mypagesize});//事件   }  },sortBy: function (sortparam) {   this.sortparam = sortparam;   this.sorttype = this.sorttype == -1 ? 1 : -1;  }  } }

关于使用vue.js组件怎么实现一个分页效果问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。


文章名称：使用vue.js组件怎么实现一个分页效果
文章URL：http://cdkjz.cn/article/gopdpi.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
营销网站建设手机网站建设套餐重庆网站设计雅安托管服务器边坡防护网成都商城网站开发等级保护测评成都网页设计网站运营买链接

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图