分页
当数据过多的时候，我们肯定是要实现分页效果的，分页效果在每个列表页都应该存在
我们后台的接口为
http://127.0.0.1:8081/api/manage/search/member?page=1&size=2 其中的page为页码，size为每页显示的条数。请求方法为post
接口数据格式为
{
"code": "2001",
"success": true,
"msg": "",
"total": 26,
"data": [
{
"id": 28,
"update_time": "2020-06-11 22:55:09",
"create_time": "2020-06-11 22:55:09",
"member_card": "123",
"member_name": "114",
"member_birthday": "1992-02-12",
"phone_number": 17693638363,
"card_money": 234234,
"Available_integral": 342342,
"pay_type": 1,
"member_address": "甘肃省"
},
{
"id": 27,
"update_time": "2020-06-11 22:55:00",
"create_time": "2020-06-11 22:55:00",
"member_card": "123",
"member_name": "113",
"member_birthday": "1992-02-12",
"phone_number": 17693638363,
"card_money": 234234,
"Available_integral": 342342,
"pay_type": 1,
"member_address": "甘肃省"
}
]
}其中的total为总条数
前面我们在 src/api/member.js 里写的没有分页的功能，重新更改。加上分页的参数，代码如下
// 会员管理接口
import request from '@/utils/request'
import BASE_URL from '@/utils/common'
export default {
// 获取会员列表数据,page 当前页码。size，每页查询条数
getList(token,size,page){
return request({
url: BASE_URL +`/api/manage/member/search?page=${page}&size=${size}`, // 反单引号'post',
headers:{
"Authorization":"JWT "+token
}
})
},
}
然后在 src/views/member/index.vue里写如下代码
<template>
<div>
<!-- 列表页面
:data绑定渲染的数据，data 里我们定义的上list
border 表格边框，表头最上面的那个边框
height 表格高度
-->
<el-table :data="list" height="380" border style="width: 100%">
<!-- type='index'获取索引值，从1开始，label显示的标题，prop接口返回数据的字段名，width列宽，不写就自动 -->
<el-table-column type="index" label="序号" width="50"></el-table-column>
<el-table-column prop="member_card" label="会员卡号" width="180"></el-table-column>
<el-table-column prop="member_name" label="会员姓名"></el-table-column>
<el-table-column prop="member_birthday" label="会员生日" width="100"></el-table-column>
<el-table-column prop="phone_number" label="手机号码" width="120"></el-table-column>
<el-table-column prop="card_money" label="可用积分"></el-table-column>
<el-table-column prop="Available_integral" label="开卡余额"></el-table-column>
<!-- 支付类型开始 -->
<el-table-column prop="pay_type" label="支付类型">
<template slot-scope="scope">
<!-- 使用过滤器,scope.row.pay_type为接口返回的pay_type的值，后面的是作用在哪个过滤器上面，这里作用在 payTypeFilter 上面-->
<span>{{scope.row.pay_type | payTypeFilter }}</span>
</template>
</el-table-column>
<!-- 支付类型结束 -->
<el-table-column prop="member_address" label="会员地址" width='180'></el-table-column>
<!-- 操作开始，scope 可以获取行数据 ，scope.row.id 获取该行数据的 id值-->
<el-table-column label="操作" width="150">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit( scope.row.id)">编辑</el-button>
<!-- 根据后端返回该行的id进行编辑和删除 -->
<el-button size="mini" type="danger" @click="handleDelete( scope.row.id)">删除</el-button>
</template>
</el-table-column>
<!-- 操作结束 -->
</el-table>
<!-- 列表页面结束 -->
<!-- 分页 -->
<!--
handleSizeChange 改变每页多少条调用这个方法，会传选择的条数过去
handleCurrentChange 点击页码调用这个方法，会传点击的页码过去
current-page当前的页码，data里定义的1，默认第一页
page-sizes 选择项，每页显示多少条
page-size 每页显示多少条，data里定义
layout="total, sizes, prev, pager, next, jumper"
total 总共多少条，去掉后不显示，sizes选择项，prev上一页的箭头，pager页码，next下一页的箭头，jumper前往多少页
-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currenPage"
:page-sizes="[10, 15, 20, 30]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
<!-- 分页结束 -->
</div>
</template>
<script>
import memberApi from "@/api/member"
// 支付类型，不能写在data里面，会报错，定义好了在下面写个 filters 方法
// 然后在列表页面使用过滤器，接口返回的pay_type是数字，不是字符串
const payTypeOptions = [
{ pay_type: 1, name: "现金" },
{ pay_type: 2, name: "微信" },
{ pay_type: 3, name: "支付宝" },
{ pay_type: 4, name: "银行卡" }
];
export default{
data(){
return {
list: [], // 数据传给list,列表渲染的数据
total: 0, // 总记录数，在接口返回数据后赋值给total
currenPage: 1, // 当前页码
pageSize: 10, // 每页显示的数据条数
}
},
created() {
// 调接口请求数据，将调接口定义一个方法，在created里调用这个方法
this.fetchData()
},
methods: {
fetchData(){
// 获取token
const token = localStorage.getItem('zz-token')
console.log(token)
// this.pageSize,this.currenPage 分页的条数和页码，要this.
memberApi.getList(token,this.pageSize,this.currenPage).then( response=>{
const res = response.data
this.total = res.total // 将接口返回的total 覆盖 data里的total
this.list = res.data // 将返回数据的data赋值给list
// console.log(res)
})
},
// 编辑
handleEdit(id){
console.log('编辑',id)
},
// 删除
handleDelete(id){
console.log('删除',id)
},
// 当每页显示条数改变后被触发，val是最新的每页显示条数
handleSizeChange(val) {
this.pageSize = val;
this.fetchData();
},
// 当页码改变后被触发，val是最新的页码
handleCurrentChange(val) {
this.currenPage = val;
this.fetchData();
}
},
filters: {
// 过滤器，转换支付类型，type为1，2，3，4
payTypeFilter(pay_type) {
const payObj = payTypeOptions.find(obj => {
// obj 就是上面的一个对象，type和上面对象的type进行对比，在返回
return obj.pay_type === pay_type;
});
// payObj 有值，返回 payObj.name
return payObj ? payObj.name : null; // 没找到类型返回null，找到了返回payObj.name
}
}
}
</script>
改动的地方如下
页面测试
