基于vue.js组件实现分页效果
程序员文章站
2023-03-30 18:36:35
前言
为了练习vue.js 之前做了一个vue.js前端分页效果,后面看到vue.js组件内容,就试着把这个功能写成一个简单组件,向组件元素传递一个object参数,...
前言
为了练习vue.js 之前做了一个vue.js前端分页效果,后面看到vue.js组件内容,就试着把这个功能写成一个简单组件,向组件元素传递一个object参数,包含分页数据,显示的列名信息,分页信息,组件提供一个事件,传递给父元素一个分页信息,父元素拿着分页信息获取数据,修改之前的object。这样就实现了分页效果。
效果
知识点
- components 组件
- props 父级向组件传参
- template 模板
- computed 计算属性
- $emit() 组件事件,组件先父级元素传参
html内容
对比之前html内容简洁多了。
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title> commontest</title> <link rel="stylesheet" href="../bootstrap.min.css" /> </head> <body> <div class="container body-content"> <header> <h2>vue.js组件分页效果</h2> </header> <div id="test" class="form-group"> <my-component v-on:show-page="getpagedata" v-bind:pager-data="pagerdata"></my-component> </div> <hr /> <footer> <p>© 2017 - 易兒善</p> </footer> </div> </body> </html>
javascript内容
<script src="../vue.js"></script> <script src="com.js"></script> <script> //模拟获取数据 var getdata=function(){ var result = []; for (var i = 0; i < 205; i++) { result[i] ={name:'test'+i,id:i,age:(math.random()*100).tofixed()}; } return result; } var vue = new vue({ el: "#test", ready:function(){ this.dataall = getdata(); this.pagerdata.page.totalcount = this.dataall.length; this.getpagedata(this.pagerdata.page); }, methods: { getpagedata: function (page) { this.pagerdata.page.pagesize = page.pagesize; this.pagerdata.page.pagecurrent = page.pagecurrent; this.pagerdata.page.pagecount = math.ceil(this.pagerdata.page.totalcount / page.pagesize);// 修改分页信息 var newpageinfo = []; for (var i = 0; i < page.pagesize; i++) { var index =i+(page.pagecurrent-1)*page.pagesize; if(index>this.pagerdata.page.totalcount-1)break; newpageinfo[newpageinfo.length] = this.dataall[index]; } this.pagerdata.data = newpageinfo; // 修改分页数据 } }, components: { 'my-component': pager }, data: { //所有数据,分页数据从这里取 dataall:[], pagerdata:{ data:[], rows:[{label:"id",name:"id"}, {label:"名字",name:"name"}, {label:"年龄",name:"age"} ], page:{ arrpagesize:[10,20,30,40], pagesize:10, pagecount:1, pagecurrent:1, totalcount:1 } } }, }); </script>
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: '<table class="table table-bordered table-responsive table-striped">\ <tr>\ <th v-for="item in pagerdata.rows" v-on:click="sortby(item.name)">{{item.label}}</th>\ </tr>\ <tr v-for="dataitem in pagerdata.data | orderby sortparam sorttype">\ <td v-for="item in pagerdata.rows">{{dataitem[item.name]}}</td>\ </tr>\ </table>\ <div class="pager" id="pager">\ <span class="form-inline">\ <select class="form-control" v-model="pagesize" v-on:change="showpage(pagecurrent,$event)" number>\ <option v-for="item in pagerdata.page.arrpagesize" value="{{item}}">{{item}}</option>\ </select>\ </span>\ <span class="btn btn-default" v-on:click="showpage(1,$event)">首页</span>\ <span class="btn btn-default" v-on:click="showpage(pagecurrent-1,$event)">上一页</span>\ <span class="form-inline">\ <input class="form-control" style="width:60px;text-align:center" type="text" v-model="pagecurrent" v-on:keyup.enter="showpage(mypagecurrent,$event,true)" />\ </span>\ <span>共{{pagerdata.page.pagecount}}页</span>\ <span class="btn btn-default" v-on:click="showpage(pagecurrent+1,$event)">下一页</span>\ <span class="btn btn-default" v-on:click="showpage(pagerdata.page.pagecount,$event)">尾页</span>\ <span>共{{pagerdata.page.totalcount}}条数据,当前显示第{{startdata}}-{{enddata}}条记录</span>\ </div>', 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组件实现分页效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。