vue3引入element ui中的分页组件

在 Vue 3 中引入 Element UI 的分页组件（Pagination）非常简单，首先你需要确保已经安装了 `element-ui` 和 `@vue/cli-plugin-element-ui`。如果你还没有安装，可以通过以下命令进行安装：

npm install element-ui --save
npm install @vue/cli-plugin-element-ui --save-dev

然后，在你的 `main.js` 或者 `vite.config.js` (如果是 Vite) 文件中配置 Element UI：

对于 Vue CLI 项目：

import { createApp } from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

createApp(App)
  .use(ElementUI)
  .mount('#app')

对于 Vite 项目：

import { createApp } from 'vue'
import App from './src/App.vue'
import ElementUI from 'element-ui'
import '@element-ui/css/lib/theme-chalk/index.css'
import { ElPagination } from 'element-ui/components/pagination'

const app = createApp(App)

app.use(ElementUI).component('ElPagination', ElPagination)

app.mount('#app')

在你的 Vue 组件中，你可以像这样使用 Element UI 的 Pagination 组件：

<template>
  <div>
    <el-pagination
      :total="totalItems"
      :current-page="currentPage"
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElPagination } from 'element-ui'

let totalItems = ref(100); // 假设总共有100项数据
let currentPage = ref(1);

function handleCurrentChange(pageNumber) {
  currentPage.value = pageNumber;
}
</script>

在这个例子中，`totalItems` 是你的数据源的总数，`currentPage` 是当前页数，`layout` 属性定义了分页器的布局，`@current-change` 是当页码变化时触发的事件。