element写一个大屏的分页

你可以使用 element-ui 的 Pagination 组件来实现大屏分页功能。以下是一个基本的示例：

<template>
  <div>
    <!-- 显示数据内容 -->
    <ul>
      <li v-for="item in data" :key="item.id">{{ item }}</li>
    </ul>

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

<script>
export default {
  data() {
    return {
      data: [], // 数据内容
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示条数
      total: 100 // 总条数
    };
  },
  methods: {
    handleCurrentChange(val) {
      // 切换页码时更新数据
      // 在这里可以调用 API 获取数据
      // 此处为示例，直接生成模拟数据
      const start = (val - 1) * this.pageSize;
      this.data = Array.from({ length: this.pageSize }, (v, k) => `Item ${start + k + 1}`);
    }
  },
  mounted() {
    // 初始化页面时获取数据
    // 在这里可以调用 API 获取数据
    // 此处为示例，直接生成模拟数据
    this.handleCurrentChange(this.currentPage);
  }
};
</script>

在上面的代码中，我们使用了 `el-pagination` 组件来实现分页功能。其中，`:current-page` 绑定了当前页码，`:page-size` 绑定了每页显示条数，`:total` 绑定了总条数。`@current-change` 监听了页码切换事件，当页码发生变化时调用 `handleCurrentChange` 方法来更新数据。在 `handleCurrentChange` 方法中，我们可以根据当前页码和每页显示条数调用 API 获取数据，并更新到 `data` 中，在模板中使用 `v-for` 渲染数据内容。