element-ui实现分页功能

为列表数据添加分页功能，使用分页组件完成分页功能。
参考：https://element.eleme.cn/#/zh-CN/component/pagination

EasyMock 添加分页模拟接口
请求URL： /member/list/search/{page}/{size}
page 当前要查询的页码， size 每页显示条数，通过这两个值，可查询出当前请求要响应的数据。
请求方式： post
描述：会员列表数据分页
mock.js 配置：

{
	"code": 2000, 
	"flag": true, 
	"message": "查询成功", 
	"data": { 
		"total": "@integer(100,200)", // 查询出来的总记录数
		"rows|10": [{ // 返回当前页的记录数 10 条, 即每页显示 10 条记录
			"id|+1": 10, 
			"cardNum": "@integer(10000)", //大于1000的正整数 
			"name": "@cname", 
			"birthday": "@date", 
			"phone|11": "@integer(0,9)", // 11个位数字
			"integral": "@integer(0, 500)", 
			"money": "@float(0, 100, 1, 3)", // 0-1000小数,1-3位小数位 
			"payType|1": ['1', '2', '3', '4'], 
			"address": "@county(true)" 
		}] 
	}
}

Api 调用接口

1. 修改 src\api 下的 member.js , 在导出的默认对象中，增加分页查询方法

 // 分页搜索方法
    // page 当前页码, size每页查询条数, searchMap条件查询的条件值
    search(page, size, searchMap) {
        return request({
            url: `/member/list/search/${page}/${size}`,
            method: 'post',
            data: searchMap
        })
    },

2. 在 src\views\member\index.vue 中, 添加 JS 代码如下：
   声明分页属性， 调用 getList 改为调用 search 方法

<script>
import memberApi from '@/api/member'

export default {
    
    data() {
        return {
            list: [],
            total: 0, // 总记录数
            currentPage: 1, // 当前页码 
            pageSize: 20, // 每页显示10条数据,
            searchMap: { // 条件查询绑定的条件值
                cardNum: '',
                name: '',
                payType: '',
                birthday: ''
            }, 
        }
   	},
   	 created() {
        // 初始化获取列表数据
        this.fetchData()
    },

    methods: {
        // 当每页显示条数改变后,被触发 , val是最新的每页显示条数
        handleSizeChange(val) {
            // console.log(val)
            this.pageSize = val
            this.fetchData()
        },
        // 当页码改变后,被触发 , val 是最新的页面
        handleCurrentChange(val) {
            // console.log(val)
            this.currentPage = val
            this.fetchData()
        },
        fetchData() {
            // memberApi.getList().then(response => {
            // 调用分页查询数据
            memberApi.search(this.currentPage, this.pageSize, this.searchMap).then(response =>{
                const resp = response.data
                // console.log(resp.data.rows)
                this.list = resp.data.rows
                this.total = resp.data.total
            })
        },
    }

修改 src\views\member\index.vue ， template 标签中添加页面模板代码：
注意：添加在 div 里面。因为 template 里面只能有唯一根节点
current-change 和 size-change 事件都是调用 fetchData

<!-- 分页组件 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>

将 @size-change 和 @current-change 事件处理的函数名改变为 handleSizeChange 和
handleCurrentChange

<el-pagination 
	@size-change="handleSizeChange" 
	@current-change="handleCurrentChange"

在 methods 中添加函数，

methods: { 
	handleSizeChange(val) { 
		this.pageSize = val 
		this.fetchData() },
	handleCurrentChange(val) { 
		this.currentPage = val 
		this.fetchData() 
},

微信公众号：求之（ID：qiuzhi1818）
前进，不停就好。无论面对什么，都不要停下。