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

Vue3可以使用第三方分页组件库，如Element-Plus或者Ant-Design-Vue等，也可以自己编写分页组件。

以下是使用Element-Plus分页组件的示例代码：

1. 安装Element-Plus

npm install element-plus --save

2. 引入分页组件

在需要使用分页组件的页面中，引入分页组件：

<template>
  <div>
    <el-pagination :total="total" :page-size="pageSize" @current-change="handleCurrentChange">
    </el-pagination>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { ref, watch } from 'vue'
import { ElPagination } from 'element-plus'

export default {
  components: {
    ElPagination
  },
  setup() {
    const total = ref(50) // 总数据量
    const pageSize = ref(10) // 每页显示数据量
    const currentPage = ref(1) // 当前页码

    // 根据当前页码，截取对应的数据
    const list = ref([])
    const data = ref([...]) // 假设这里是从后台获取到的所有数据
    const handleCurrentChange = (page) => {
      currentPage.value = page
    }

    // 监听 currentPage 的变化，重新截取数据并更新 list
    watch(currentPage, (newVal, oldVal) => {
      list.value = data.value.slice((newVal - 1) * pageSize.value, newVal * pageSize.value)
    })

    // 初始化第一页的数据
    list.value = data.value.slice(0, pageSize.value)

    return {
      total,
      pageSize,
      currentPage,
      list,
      handleCurrentChange
    }
  }
}
</script>

以上代码中，我们使用`ref`定义了总数据量、每页显示数据量、当前页码和当前页的数据。在`handleCurrentChange`方法中，我们只更新了 currentPage 的值，而没有更新 list 的值。因为我们使用了 `watch` 监听 currentPage 的变化，重新截取数据并更新 list。

在页面中，我们使用`el-pagination`组件来展示分页器，使用`v-for`指令遍历`list`来展示对应的数据。

注意：以上代码仅为示例代码，需要根据实际情况修改。