vue 实现简单表格分页功能

使用框架实现表格展示和跳转功能，一直不懂原理。所以自己写一个简单的，加深理解。

布局分为2块，上面是表格展示数据，下面是点击按钮跳转。
效果图：
vue 实现简单表格分页功能
代码：

<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta http-equiv="X-UA-Compatible" content="IE=edge" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <title>Document</title>     <style>       table {         border-collapse: collapse;       }       table,       th,       td {         border: 1px solid black;       }       .jump ul {         display: flex;       }       .jump ul li {         list-style: none;       }     </style>   </head>   <body>     <div id="app">       <!-- 展现数据的表格 -->       <table>         <!-- 表头 -->         <tr>           <th>姓名</th>           <th>年龄</th>           <th>性别</th>           <th>操作</th>         </tr>         <!-- 每一行数据 -->         <tr v-for="(item,index) in currentList" :key="index">           <td>{{item.name}}</td>           <td>{{item.age}}</td>           <td>{{item.gender}}</td>           <td>             <button>修改</button>             <button>删除</button>           </td>         </tr>       </table>        <!-- 点击跳转按钮部分 -->       <div class="jump">         <ul>           <li>             <button @click="goto(1)">首页</button>           </li>           <li v-for="(item,index) in getPageNum()">             <button @click="goto(item)">{{item}}</button>           </li>           <li>             <button @click="goto(totalPage)">尾页</button>           </li>         </ul>       </div>     </div>   </body> </html> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script>   new Vue({     el: "#app",     data: {       // 总页数       totalPage: 0,       //   每页包含数据条数       pageSize: 5,       //   当前在第几页       currentPage: 1,       //   当前页面的数据       currentList: [],       //   表格的总体数据       dataList: [         {           name: "stu1",           age: 20,           gender: "male",         },         {           name: "stu2",           age: 21,           gender: "male",         },         {           name: "stu3",           age: 20,           gender: "male",         },         {           name: "stu4",           age: 20,           gender: "male",         },         {           name: "stu1",           age: 20,           gender: "male",         },         {           name: "stu2",           age: 21,           gender: "male",         },         {           name: "stu3",           age: 20,           gender: "male",         },         {           name: "stu4",           age: 20,           gender: "male",         },         {           name: "stu1",           age: 20,           gender: "male",         },         {           name: "stu2",           age: 21,           gender: "male",         },         {           name: "stu3",           age: 20,           gender: "male",         },         {           name: "stu4",           age: 20,           gender: "male",         },       ],     },     created() {       // 计算一共有多少页       this.totalPage = Math.ceil(this.dataList.length / this.pageSize);       this.getPageData(1);     },     methods: {       // 获取页码数组，用于渲染点击跳转button       getPageNum() {         pageList = [];         for (let index = 0; index < this.totalPage; index++) {           pageList[index] = index + 1;         }         return pageList;       },       //   更新表格页面显示数据       getPageData(index) {         this.currentList = this.dataList.slice(           (index - 1) * this.pageSize,           index * this.pageSize         );       },       //   跳转到指定页面       goto(index) {         this.getPageData(index);       },     },   }); </script>

上一个：宠物货源网（宠物进货批发网站哪个好）

下一个：哪里有免费给狗狗打疫苗的地方（哪里有免费给狗狗打疫苗的地方重庆）

热门文章

归纳