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

(编辑：jimmy 日期: 2024/11/19 浏览：2)

前言

为了练习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>&copy; 2017 - 易兒善</p>
 </footer>
 </div>
</body>
</html>

javascript内容

<script src="/UploadFiles/2021-04-02/vue.js">

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"_blank" href="http://xiazai.jb51.net/201812/yuanma/vuepagerCom(jb51.net).rar">vue.js组件实现分页效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：javascript实现计算指定范围内的质数示例

下一篇：详解Vue.js v-for不支持IE9的解决方法