vue3使用分页组实现切换

Vue3可以使用Element Plus提供的分页组件来实现分页切换。以下是一个简单的示例：

1. 首先安装Element Plus组件库：

npm install element-plus --save

2. 在需要使用分页组件的Vue组件中引入Element Plus：

import { defineComponent } from 'vue'
import { ElPagination } from 'element-plus'

3. 在模板中使用ElPagination组件并绑定相应的属性和事件：

<template>
  <div>
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
  </div>
</template>

其中，currentPage表示当前页码，pageSize表示每页显示的数据量，total表示总数据量。@current-change和@size-change分别是页码和每页数据量改变时的回调函数。

4. 在Vue组件中定义相应的属性和方法：

export default defineComponent({
  components: {
    ElPagination
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
      // 根据当前页码获取相应的数据
      // ...
    },
    handleSizeChange(val) {
      this.pageSize = val
      // 根据每页数据量获取相应的数据
      // ...
    }
  }
})

以上就是使用Element Plus实现分页切换的简单示例。