vue3使用分页组件实现数据切换

Vue3可以使用第三方分页组件来实现数据的切换效果，常见的分页组件有Element Plus、Ant Design Vue等。下面以Element Plus为例，介绍如何使用分页组件实现数据的切换。

首先，需要在Vue项目中安装Element Plus，可以使用以下命令进行安装：

npm install element-plus

然后，在Vue组件中，引入分页组件和相关的样式，例如：

<template>
  <div>
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { ElPagination } from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

export default {
  components: {
    ElPagination,
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100,
    };
  },
  methods: {
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      // 根据当前页码获取对应的数据
      // ...
    },
  },
};
</script>

在上面的代码中，使用`<el-pagination>`标签来显示分页组件，`current-page`属性指定当前页码，`page-size`属性指定每页显示的数据条数，`total`属性指定总共的数据条数，`@current-change`事件监听页码变化，然后在`handleCurrentChange`方法中，根据当前页码获取对应的数据。

通过上述步骤，就可以使用Element Plus分页组件实现数据的切换效果了。如果使用其他分页组件，也可以按照类似的方法来使用。