vue element分页

Vue和Element UI是一对非常常用的组合，用于构建用户界面。在使用Element UI进行分页时，你可以使用Element UI的Pagination组件。

首先，确保你已经安装了Element UI。然后，在你的Vue组件中导入Pagination组件：

import { Pagination } from 'element-ui';

接下来，注册Pagination组件：

export default {
  components: {
    Pagination
  },
  // ...
}

现在，你可以在模板中使用Pagination组件了。例如，在一个包含数据列表的页面中，你可以这样使用Pagination组件：

<template>
  <div>
    <!-- 数据列表 -->
    <ul>
      <li v-for="item in dataList" :key="item.id">{{ item.name }}</li>
    </ul>

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

在上述示例中，我们使用了el-pagination标签来创建分页组件。其中，current-page属性绑定到了currentPage变量，用于指定当前页码。page-sizes属性是一个数组，用于指定每页显示的条目数选项。pageSize属性用于指定当前页显示的条目数。layout属性用于自定义分页组件的布局。

在处理分页事件时，我们可以使用@current-change监听器来捕获页码变化事件：

methods: {
  handleCurrentChange(page) {
    // 更新当前页码
    this.currentPage = page;
    // 根据新的页码获取数据
    this.getData();
  },
  getData() {
    // 根据当前页码和每页显示的条目数获取数据
    // 更新数据列表
  }
}

以上就是使用Vue和Element UI进行分页的基本步骤。你可以根据自己的需求进行进一步的定制和样式调整。希望对你有所帮助！