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

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

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

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

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>
 <h3>vue.js组件分页效果</h3>
 </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>&copy; 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"  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组件怎么实现一个分页效果问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。

网页名称：使用vue.js组件怎么实现一个分页效果-创新互联
当前URL：https://www.cdcxhl.com/article2/hejoc.html

成都网站建设公司_创新互联，为您提供网页设计公司、App设计、网站内链、企业网站制作、网站收录、网站改版

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容