Vue3 Element-Plus pagination实现翻页

---

前言

在Vue3环境下快速呈现一个基本的pagination, 能实现换页.
但是没有换页动画.

---

二、步骤

引入:

//main.js
import {
    createApp } from 'vue'
import App from './App.vue'
import {
    ElPagination } from 'element-plus'
import '../node_modules/element-plus/theme-chalk/index.css'  //样式根据具体的路径来

---

传参

先传":total"总页码数, 不然会发现页面上什么都没有(实际显示页数 = 传入的总页数 / 10);

再传current-page, 当前所在页(也是默认的起始页码), 比如默认第一页就传进去"1", 一定记得双向绑定, 后面翻页全靠它了(永远存储的是最新的页码).

然后给layout组件布局传如下值, 保证页码栏旁边没有"去到第几页"的输入框.

background给页码加一个背景框;

<el-pagination 
  layout="prev, pager, next" 
  v-model:current-page="data.currentPage"
  :total="data.article_page * 10" 
  background 
/>

---

DOM结构

那么首先要有一个div去显示 “页”, 那待会要用 li 来做数据条, "页"就用 ul:

<ul>
  <li v-for="item in data.article_content" :key="item">
    <p>{
  {item.article_title}}</p>
  </li>
</ul>
<el-pagination 
  layout="prev, pager, next"
  v-model:current-page="data.currentPage" 
  :total="data.article_page * 10" 
  background 
/>

export default