Element-ui--关于pagination组件的使用记录

一个后台管理系统基本都具备分页功能。

官网里的组件库将pagination组件的使用方法描述的很全面了，这里做一个使用记录。
官网链接：https://element.eleme.cn/#/zh-CN/component/pagination

以下是我的一个案例练习👇

1. 效果演示

---

2. 以下是该案例的代码部分

<template>
<div>
<el-table
      border
      class="table-main"
       // 👇极为重要的一步，决定每页显示的条目数
      :data="amplifierData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
>
      <el-table-column label="序号" type="index" />
      <el-table-column label="名称" prop="name" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
            <el-button type="primary" icon="el-icon-edit" circle/>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
            <el-button type="danger" icon="el-icon-delete" circle />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

<el-pagination 
	:total="amplifierData.length" // 总共的条目数
	:page-size="pageSize" // 每页显示多少条数据
	:page-sizes="[5, 10, 20, 40]" // 可供用户选择更改每页显示的条目数
	:current-page="currentPage"  // 当前在第几页
	layout="total, sizes, prev, pager, next, jumper" // 定义分页条的模版
	@size-change="handleSizeChange"  // 修改当前页面显示条数触发事件
	@current-change="handleCurrentChange"  // 动态修改当前在第几页的触发事件
/>
</div>
</template>

<script>
import { getDataLists } from '@/api/getDataLists' // 从后台导入数据

export default {

  data(){
    return{
        DataList: [], // 存储数据
        currentPage: 1, // 默认初始页
        pageSize: 5, // 默认每页显示条数
    }
  },

created() {
    this.getDataList() // 获取列表数据
},
 
 methods: {
   async getDataList() {
      const res = await getDataLists()
      this.DataList = res.data
    },

    // 每页显示条目数 pageSize
    handleSizeChange(size) {
      this.pageSize = size 
    },

    // 当前在第几页 currentPage
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
    }
  }
}
</script>