前端分页的实现

• 硬写版本（没有组件）
  • 思路：将返回的列表数据根据每页显示的数量进行切割，分别展示

// html部分
<div class="table">
	<div v-for="(item,index) in currentPageData" :key="index">
		{{item.name}}
	</div>
</div>
<div class="footer">
	<button @click="prevPage()">上一页</button>
	<span>第{{currentPage}}页/共{{totalPage}}页</span>
	<button @click="nextPage()">下一页</button>
</div>


// js部分
data () {
	return {
		mailList:'',  //总数据list
        //分页
        totalPage: 1, // 统共页数，默认为1
        currentPage: 1, //当前页数 ，默认为1
        pageSize: 3, // 每页显示数量
        currentPageData: [] //当前页显示内容
	}
}

 //分页
fenye () {
   // 计算一共有几页
   this.totalPage = Math.ceil(this.mailList.length / this.pageSize);
   console.log("asdsdsdsdsd->"+this.totalPage)
   // 计算得0时设置为1
   this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
   this.setCurrentPageData();
   console.log("总页面数为--->"+this.totalPage);
 },
 
// 设置当前页面数据，对数组操作的截取规则为[0~10],[10~20]...,
setCurrentPageData () {
	let begin = (this.currentPage - 1) * this.pageSize;
    let end = this.currentPage * this.pageSize;
    this.currentPageData = this.mailList.slice(begin,end);
},

//上一页
prevPage () {
    console.log(this.currentPage);
    if (this.currentPage == 1) return;
    this.currentPage--;
    this.setCurrentPageData();
},
// 下一页
nextPage () {
    if (this.currentPage == this.totalPage)return ;
    this.currentPage++;
    this.setCurrentPageData();
},

• 正常版本
  • 使用element-ui组件的分页组件实现

// html
<div class="list-scroll">
  <div v-for="(v, i) in computedPageNum" :key="i"
    :class="creditId === v.creditId ? 'text-item-active' : 'text-item'"
    @click="chooseCard(v)">
    {{ `${v.customerName} ${v.phone}` }}
  </div>
</div>
<!-- 分页 -->
 <el-pagination
   background
   :total="rightUserList.length"
   :pager-count="5"
   @current-change="handleCurrentChange"
   :current-page="currentPage"
   :page-size="pageSize"
   layout="total,prev,pager,next"
 >
 </el-pagination>

// js
data () {
	return {
	  rightUserList: [], // 列表数据
	  totalPage: 1, // 总共页数，
	  currentPage: 1, //当前页数 ，
	  pageSize: 10, // 每页显示数量
	}
}
computed: {
	computedPageNum() {
      return this.rightUserList.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize,
      );
    },
},
methods: {
	handleCurrentChange(val) {
	  this.currentPage = val;
	},
}