分页功能
需求:很多数据时,一个页面展示不下,就需要在同一页面通过分页控制来查看数据列表;
功能组成:列表+分页控制器
实现:此处使用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
效果图如下: