欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-03-30 18:36:35
前言 为了练习vue.js 之前做了一个vue.js前端分页效果,后面看到vue.js组件内容,就试着把这个功能写成一个简单组件,向组件元素传递一个object参数,...

前言

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

效果

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

知识点

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

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