Vue实现数据分页显示

<template>
  <div>
    <ul>
      <li v-for="item in paginatedList" :key="item.id">{{ item.name }}</li>
    </ul>

    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      :total="dataList.length"
      @current-change="handlePageChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10, // 每页显示的条目数
      dataList: [], // 数据列表
    };
  },
  computed: {
    paginatedList() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.dataList.slice(startIndex, endIndex); // 根据当前页码和每页显示的条目数返回分页后的数据列表
    },
  },
  methods: {
    handlePageChange(newPage) {
      this.currentPage = newPage;
    },
  },
  mounted() {
    // 假设从服务器获取数据列表
    // 这里使用setTimeout模拟异步请求
    setTimeout(() => {
      // 假设获取到的数据为dataList
      this.dataList = [
        { id: 1, name: '数据1' },
        { id: 2, name: '数据2' },
        { id: 3, name: '数据3' },
        // ...
      ];
    }, 1000);
  },
};
</script>

在Vue组件中，我们可以使用computed属性定义计算属性，实现分页显示。计算属性通常用于处理一些基于响应式数据的复杂逻辑或对数据进行处理和转换。

计算属性由一个函数和一个返回值组成。在函数中，我们可以访问组件实例的数据、其他计算属性以及全局状态，然后根据这些数据进行计算并返回一个值。计算属性的返回值会被缓存，只有依赖的响应式数据发生变化时，才会重新计算。