【前端】vue+html+js 实现table表格展示,以及分页按钮添加

一. 问题描述

数据条数太多显示到页面上时可能会渲染较慢,因此需要截取数据进行展示。

二. 代码写法

思路:按照上述图示思路,需要有两个数据列表,一个存储的是所有的列表数据,一个存储的是展示的数据列表,程序开始后先选择数据头部的几条数据。因此也会需要一个当前第几页的参数。

2.1 代码展示

html部分

v-for展示列表,以及两个按钮对当前页面进行选择。

html 复制代码
  <div id="app">
    <!-- 数据列表 -->
    <ul>
      <li v-for="item in currentPageData" :key="item.id">{{ item.name }}</li>
    </ul>
    <!-- 分页器 -->
    <div>
      <button @click="prevPage">上一页</button>
      <span>{{ currentPage }}</span>
      <button @click="nextPage">下一页</button>
    </div>
  </div>

Js部分

利用created生命周期钩子进行数据初始化。计算属性进行展示列表更新。

javascript 复制代码
<script>
    // 创建Vue实例
    new Vue({
      el: '#app',
      data: {
        currentPage: 1, // 当前页码
        pageSize: 4, // 每页显示的数据条数
        dataList: [], // 数据列表
        totalPages:0,
      },      
      created() {
 
        // ajax请求获取数据
        // 这里使用setTimeout模拟异步请求
          this.dataList = [
            { id: 1, name: '数据1' },
            { id: 2, name: '数据2' },
            { id: 3, name: '数据1' },
            { id: 4, name: '数据2' },
            { id: 5, name: '数据1' },
            { id: 6, name: '数据2' },
            { id: 7, name: '数据1' },
            { id: 8, name: '数据2' },
            { id: 9, name: '数据1' },
            { id: 10, name: '数据2' },
            { id: 11, name: '数据1' },
            { id: 12, name: '数据2' },
            { id: 13, name: '数据1' },
            { id: 14, name: '数据2' },
            { id: 100, name: '数据100' },
          ];
        this.totalPages = Math.ceil(this.dataList.length/this.pageSize);          
    },
      computed: {
        // 计算属性,根据当前页码和每页显示的数据条数,计算当前页显示的数据
        currentPageData() {
          const start = (this.currentPage - 1) * this.pageSize;
          const end = start + this.pageSize;
          return this.dataList.slice(start, end);
        },
      },
      methods: {
        // 上一页
        prevPage() {
          if (this.currentPage > 1) {
            this.currentPage--;
          }
        },
        // 下一页
        nextPage() {
          if (this.currentPage < this.totalPages) {
            this.currentPage++;
          }
        },
      },
    });
  </script>
相关推荐
NBtab7 小时前
Vite + Vue3项目版本更新检查与页面自动刷新方案
前端
天天扭码7 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户458203153177 小时前
CSS特异性:如何精准控制样式而不失控?
前端·css
用户51681661458418 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
libraG8 小时前
Jenkins打包问题
前端·npm·jenkins
前端康师傅8 小时前
JavaScript 作用域
前端·javascript
前端缘梦8 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
我是天龙_绍8 小时前
使用 TypeScript (TS) 结合 JSDoc
前端
云枫晖8 小时前
JS核心知识-事件循环
前端·javascript
Simon_He8 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown