基于vue.js组件实现分页效果

前言

为了练习vue.js 之前做了一个vue.js前端分页效果，后面看到vue.js组件内容，就试着把这个功能写成一个简单组件，向组件元素传递一个object参数，包含分页数据，显示的列名信息，分页信息，组件提供一个事件，传递给父元素一个分页信息，父元素拿着分页信息获取数据，修改之前的object。这样就实现了分页效果。

效果

知识点

• components 组件
• props 父级向组件传参
• template 模板
• computed 计算属性
• $emit() 组件事件，组件先父级元素传参
  

html内容

对比之前html内容简洁多了。

 
 
 
 


 
 

 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组件实现分页效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。