elementui分页功能

ElementUI是一个基于Vue.js的UI组件库，其中包含了丰富的组件和功能。要实现分页功能，可以使用ElementUI提供的Pagination组件。

首先，需要在你的项目中引入ElementUI库。可以通过npm或者直接引入CDN的方式进行引入。

然后，在需要使用分页功能的页面中，使用Pagination组件进行分页的渲染。例如：

<template>
  <div>
    <!-- 分页组件 -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"  // 每页显示条数可选项
      :page-size="pageSize"  // 每页显示条数
      :total="total"  // 总条数
      layout="prev, pager, next, sizes, jumper"  // 分页布局
    ></el-pagination>

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

<script>
export default {
  data() {
    return {
      currentPage: 1,  // 当前页码
      pageSize: 10,   // 每页显示条数
      total: 100,     // 总条数
      dataList: [],   // 数据列表
    };
  },
  computed: {
    // 根据当前页码和每页显示条数计算当前页显示的数据
    currentData() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.dataList.slice(startIndex, endIndex);
    },
  },
  methods: {
    // 处理页码改变事件
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
  },
};
</script>

上述代码中，通过el-pagination组件实现了分页功能。其中，current-page表示当前页码，page-sizes表示每页显示条数可选项，page-size表示每页显示条数，total表示总条数，layout表示分页布局。

在computed属性中，根据当前页码和每页显示条数计算出当前页显示的数据。

通过handleCurrentChange方法处理页码改变事件，更新当前页码。

以上是一个简单的使用ElementUI实现分页功能的示例，你可以根据自己的实际需求进行相应的调整和扩展。