vscode写一个element组件分页

在 VS Code 中使用 Element 组件库，需要先安装 Element 插件，然后在 Vue 项目中引入 Element 组件库。

以下是一个示例的 Element 分页组件代码：

<template>
  <div>
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @current-change="handleCurrentPageChange"
      @size-change="handlePageSizeChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: 'PaginationExample',
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100,
    };
  },
  methods: {
    handleCurrentPageChange(newPage) {
      this.currentPage = newPage;
      // query data using new page and page size
    },
    handlePageSizeChange(newSize) {
      this.pageSize = newSize;
      // query data using new page and page size
    },
  },
};
</script>

在这个例子中，使用了 Element 的 el-pagination 组件来实现分页功能。其中，`:current-page` 和 `:page-size` 分别表示当前页码和每页显示的数据条数，`:total` 表示总数据条数。`layout` 属性用于控制分页组件的布局，`@current-change` 和 `@size-change` 事件分别表示页码和每页显示的数据条数发生变化时的回调函数。

在实际应用中，需要根据具体的需求进行修改。如果要使用这个分页组件查询后端数据，可以在 `handleCurrentPageChange` 和 `handlePageSizeChange` 函数中调用后端 API，获取新的数据并更新页面。