使用vue.js组件怎么实现一个分页效果-创新互联

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

创新互联2013年开创至今，是专业互联网技术服务公司，拥有项目成都网站建设、网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元菏泽做网站,已为上家服务,为菏泽各地企业和个人服务,联系电话:18982081108vue是什么

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

html内容




 
 
  CommonTest
 


 
 
 vue.js组件分页效果

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组件怎么实现一个分页效果-创新互联
网站地址：http://ybzwz.com/article/hejoc.html

使用vue.js组件怎么实现一个分页效果-创新互联

其他资讯