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

前言

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

效果

知识点

成分组件小道具父级向组件传参模板模板计算计算属性$emit()组件事件，组件先父级元素传参超文本标记语言内容

对比之前超文本标记语言内容简洁多了。

！DOCTYPE html html head meta charset=' utf-8 '/meta name=' viewport ' content=' width=device-width，initial-scale=1.0 '/title common test/title link rel='样式表href='./bootstrap。量滴CSS '/头体div class='容器体-内容'标头h2vue.js组件分页效果/H2/页眉div id=' test ' class=' form-group ' my-component v-: show-page=' getpage data ' v-bind : pager-data=' page data '/my-component/div HR/footer p 2017-易兒善/p/页脚/div/正文/htmljavascript内容

脚本src='http:/vue。js/script script src=' http : com。js/模拟获取数据var getData=function(){ var result=[]；for(var I=0；I 205 I){ 0结果[i]={name:'test' i，id:i，age:(Math.random()*100).toFixed()}；}返回结果；} var vue=new Vue({ el: '#test '，ready : function(){ this。data all=GetDATa()；这个。页面数据。佩奇。总计数=这个。dataall。长度；这个。获取页面数据(这。页面数据。页面)；}，methods: { getPageData:函数（页){这个。页面数据。佩奇。页面大小=页面。页面大小；这个。页面数据。佩奇。当前页面=页面。当前页面；这个。页面数据。佩奇。页数=数学。天花板(这个。页面数据。佩奇。总计数/页数。页面大小)；//修改分页信息var新页面信息=[]；for(var I=0；一.佩奇。页面大小；I){ var index=I(第页。当前页面-1)*页面。页面大小；if(索引这个。页面数据。佩奇。总计数-1)中断；新页面信息[新页面信息。长度]=这个。DataAll[索引]；}这个。页面数据。data=NewPageInfo//修改分页数据} },组件： { '我的组件' :寻呼机},数据： { //所有数据，分页数据从这里取dataAll:[]，page data: { data :[]，行：[{label: ' ID '，name:'id'}，{label: '名字，名称： '名称' }，标签: '年龄，name:'age'} ]，page:{ arrPageSize:[10，20，30，40]，pagesize:10，pageCount:1，pageCurrent:1，totalCount:1 } } }，})；/scriptcom.js组件内容

var pager={ prop : { page data : { type : Object，default : function(){ return { data :[]，row :[]，page:{ //分页大小pagesize:20，//分页数arrPageSize:[10，20，30，40]，//当前页面pageCurrent:1，//总分页数页面计数：1,//总数totalCount:10 } } } } }，模板： ' table class=' table-table-bordered table-responsive table-stripped ' \ tr \ th v-for='页数据。行“v-: click=”排序依据(项。name)' { { item。标签} }/th \/tr \ v-for='页面数据。数据。数据中的dataItem |按排序参数排序排序排序类型为“\ TD v-for=”的页面数据。行中的项目“{ dataItem[item .首页/span \\ span=' BTN BTN-默认' v-: click='显示页面(当前页面-1，$event ')上一页/span \ span class=' form-inline ' \ input class=' form-control ' style=' width :60 px；text-align : center ' type=' text ' v-model=' page current ' v-: key up。输入='显示页面(我的页面当前，$event，true)' /\ /span\ span共{ {页面数据。佩奇。页数} }页/span \\ span=' BTN BTN-默认' v-: click='显示页面(当前页面1，$event ')下一页/span \\ span=' BTN BTN-默认' v-: click='显示页面(页面数据。佩奇。页数，$event)'尾页/span\ span共{ { page DATa }。佩奇。TotalCount } }条数据，当前显示第{{startData}}-{{endData}}条记录/span\ /div '，数据： function(){ return { mypage size :10，mypageCurrent:1，sortparam: ' '，sorttype:1，}}，//计算属性computed:{ //分页大小获取的时候显示父级传入的，修改的时候修改自身的。子组件不能修改父元素的值页面大小： { get : function(){ return this。页面数据。佩奇。页面大小；}，设置：函数(值){ this。mypage size=值；} }，当前页面： { get : function(){ return this。页面数据。佩奇。当前页面；}，设置：函数(值){ this。mypage current=值；} }，startdata :函数(){返回此。页面数据。佩奇。页面大小*(这个。页面数据。佩奇。当前页面-1)1；}，end data : function(){ var max=this。页面数据。佩奇。页面大小*这个。页面数据。佩奇。当前页面；返回maxthis。页面数据。佩奇。总数？这个。页面数据。佩奇。总计数最大为：} }，methods:{ showPage:函数(pageIndex，$ event){ if(page index 0){ if(page index this。页面数据。佩奇。页数)页面索引=这个。佩奇。页数；这个$emit('show-page '，{ page current 3360 page index，页面大小： this。my page size })；//事件} }，sortBy:函数(排序参数){这个。排序参数=排序参数；这个。排序类型=这个。排序类型==-1？1 : -1;} }}源码下载：vue.js组件实现分页效果

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