vue中使用分页

分页功能

需求：很多数据时，一个页面展示不下，就需要在同一页面通过分页控制来查看数据列表；
功能组成：列表+分页控制器
实现：此处使用element-ui里的分页控制器来实现
ps：element-ui的安装和引入可自行看element-ui官网
代码展示
1.封装公共分页控制器组件

<template>
  <el-pagination
    :current-page="currentPage"
    layout="total, prev, pager, next, jumper"
    :total="total"
    @current-change="handleCurrentChange">
  </el-pagination>
</template>

<script>
  export default {
    props: {
      currentPage: Number,
      total: Number
    },
    methods: {
      handleCurrentChange (point) {
        this.$emit('handleCurrent', point)
      }
    }
  }
</script>

<style scoped>
</style>

2.在需要用分页的组件里引入分页组件，注册后使用
html

<div v-for="(item, index) in list" :key="index">
	<div>
		<span>序列号：{{(pageNo-1)*pageSize+index+1}}</span>
		<span style="margin-left: 20px;">地区：{{item.t_address}}</span>
		<span style="margin-left: 20px;">时间：{{item.createtime}}</span>
		<span style="margin-left: 20px;">住宿类型：{{item.stay_type | selectstay}}</span>
	</div>
</div>
<pagination
:currentPage="currentPage"
:total="total"
@handleCurrent="getList"></pagination>

js

data() {
  return {
    list: [],
    total: 0,       //总条数
    currentPage: 0,  //第几页
    pageNo: 1,   //当前页数
    pageSize: 10  //条数
  }
},
mounted() {
   this.getList(1)   //初始时页码传入
},
methods: {
  getList(val) {
    this.pageNo = val || this.pageNo
    getPagesList({  //后台接口，获取列表数据，可忽略
		stay_id: this.stayId,
		page: val
	}).then(res => {
		if(parseInt(res.code === 200)) {
			let { page,list = {}, count} = res.data
            this.list = list
            this.currentPage = page
            this.total = count
		}
	})
  }
},
filters: {
	selectstay(type) {
		switch(type) {
			case 1:
				return '自己住'
			case 2:
				return '不住'
			case 3:
				return '和朋友住'
			case 4:
				return '和家人住'
			default:
				return type
		}
	}
}

其中序列号的排序，需要按顺序排列下去，简单公式为 （当前页码-1）*每页条数+索引值+1
效果图如下：