Vue3 表格分页实现教程 - 简单易懂的代码示例

<p>&quot;<template>\n  <div>\n    <table>\n      <thead>\n        <tr>\n          <th>ID</th>\n          <th>Name</th>\n          <th>Email</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr v-for="(user, index) in displayedUsers" :key="user.id">\n          <td>{{ user.id }}</td>\n          <td>{{ user.name }}</td>\n          <td>{{ user.email }}</td>\n        </tr>\n      </tbody>\n    </table>\n    <div>\n      &lt;button @click=&quot;previousPage&quot; :disabled=&quot;currentPage === 1&quot;&gt;Previous</button>\n      <span>{{ currentPage }}</span>\n      &lt;button @click=&quot;nextPage&quot; :disabled=&quot;currentPage === totalPages&quot;&gt;Next</button>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { ref, computed } from 'vue';\n\nexport default {\n  data() {\n    return {\n      users: [\n        { id: 1, name: 'John', email: 'john@example.com' },\n        { id: 2, name: 'Jane', email: 'jane@example.com' },\n        // ...\n      ],\n      pageSize: 5,\n      currentPage: 1,\n    };\n  },\n  computed: {\n    totalPages() {\n      return Math.ceil(this.users.length / this.pageSize);\n    },\n    displayedUsers() {\n      const start = (this.currentPage - 1) * this.pageSize;\n      const end = start + this.pageSize;\n      return this.users.slice(start, end);\n    },\n  },\n  methods: {\n    previousPage() {\n      this.currentPage--;\n    },\n    nextPage() {\n      this.currentPage++;\n    },\n  },\n};\n</script>\n\n<style>\ntable {\n  width: 100%;\n  border-collapse: collapse;\n}\n\nth, td {\n  padding: 8px;\n  border-bottom: 1px solid #ddd;\n}\n\nbutton {\n  margin: 4px;\n}\n</style>\n\n在上述代码中，<code>users</code>数组包含了所有的用户数据。<code>pageSize</code>定义了每页显示的记录数，<code>currentPage</code>表示当前页码。\n\n通过计算属性<code>totalPages</code>计算出总页数。计算属性<code>displayedUsers</code>根据当前页码和每页记录数来计算出当前页应该显示的用户数据。\n\n<code>previousPage</code>和<code>nextPage</code>方法分别用于切换到上一页和下一页。\n\n最后，使用<code>v-for</code>指令在表格中循环渲染显示的用户数据，并使用按钮来切换页码。\n\n这样，就实现了一个简单的表格分页功能。</p>