vue3 element-plus分页 案例

好的，下面是一个使用Vue 3和Element Plus实现分页的案例。

首先，你需要安装Vue 3和Element Plus。你可以通过以下命令来安装它们：

npm install vue@next
npm install element-plus

接下来，在你的Vue文件中导入Vue和Element Plus的相关组件，并添加一个简单的分页组件。以下是一个基本的示例：

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

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

export default {
  components: {
    ElPagination,
  },
  setup() {
    const currentPage = ref(1);
    const pageSize = ref(10);
    const total = ref(100);

    const handleSizeChange = (newSize) => {
      pageSize.value = newSize;
      // 更新数据
    };

    const handleCurrentChange = (newPage) => {
      currentPage.value = newPage;
      // 更新数据
    };

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

在上面的示例中，我们使用了`el-pagination`组件来实现分页。我们通过`current-page`属性来绑定当前页码，通过`page-sizes`属性来设置每页显示的条目数选项，通过`page-size`属性来绑定当前每页显示的条目数，通过`total`属性来设置总条目数。

通过监听`size-change`事件和`current-change`事件，我们可以在每次切换每页条目数或者切换页码时执行对应的操作。你可以在这些事件的回调函数中实现数据更新的逻辑。

以上就是一个使用Vue 3和Element Plus实现分页的简单案例。你可以根据自己的需求进行进一步的定制和扩展。希望对你有帮助！如果还有其他问题，请随时提问。