在web开发过程中,通常使用表格展示数据,在数据较多时采用分页的方式展示给用户。
分页方式有前端假分页和后端分页两种实现方式,此文仅记录前端假分页实现方式。
第一步:添加分页组件(el-pagination)在表格下方,添加的代码如下所示:
<template> <el-table> ... </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[15, 30, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="currentTotal"> </el-pagination> </template> <script> ... </script>
第二步:添加分页所需的变量,如下所示:
<script> export default { methods: { ... }, data() { return { currentPage: 1, pageSize: 30, currentTotal: 0, tableData: [] } } } </script>
第三步:添加相应的分页方法,如下所示:
<script> export default { methods: { handleSizeChange(val) { this.pageSize = val; console.log(`每页 ${val} 条`); }, handleCurrentChange(val) { this.currentPage = val; console.log(`当前页: ${val}`); } }, data() { return { currentPage: 1, pageSize: 30, currentTotal: 0, tableData: [] } } } </script>
第四步:修改查询按钮逻辑,在成功查询后,更新数据的总数量。代码如下所示:
<script> import {ServFindAllByConditions} from '@/service/database' export default { methods: { handleBtnQuery(query) { if (query.env === "") { this.$message({ message: '请选择查询环境', type: 'warning' }); return; } ServFindAllByConditions(query).then(res => { this.tableData = res.data; this.currentTotal = this.tableData.length; this.$message({ message: res.msg, type: res.code == 200 ? 'success' : 'warning' }); }) .catch(err => { console.log(err) }) }, handleSizeChange(val) { this.pageSize = val; console.log(`每页 ${val} 条`); }, handleCurrentChange(val) { this.currentPage = val; console.log(`当前页: ${val}`); } }, data() { return { currentPage: 1, pageSize: 30, currentTotal: 0, tableData: [] } } } </script>
第五步:使用slice实现前端的假分页,最终vue文件中的主要代码如下所示:
<template> <d2-container> <el-form :model="query" :inline="true"> <el-form-item label="英文简称:"> <el-input v-model="query.eng" placeholder="请输入英文简称..." clearable></el-input> </el-form-item> <el-form-item> <el-button @click="handleBtnQuery(query)" type="primary" icon="el-icon-search">搜索</el-button> </el-form-item> </el-form> <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" hight="250" border stripe max-height="650" style="width: 100%"> <el-table-column fixed type="index" width="50"></el-table-column> <!--<el-table-column prop="id" label="系统主键" width="100"></el-table-column>--> ... ... <el-table-column label="访问链接" width="400" show-overflow-tooltip> <template slot-scope="scope"> <a :href="scope.row.url" target="_blank" class="buttonText">{{scope.row.url}}</a> </template> </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[15, 30, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="currentTotal"> </el-pagination> </template> <script> import {ServFindAllByConditions} from '@/service/database' export default { methods: { handleBtnQuery(query) { if (query.env === "") { this.$message({ message: '请选择查询环境', type: 'warning' }); return; } ServFindAllByConditions(query).then(res => { this.tableData = res.data; this.currentTotal = this.tableData.length; this.$message({ message: res.msg, type: res.code == 200 ? 'success' : 'warning' }); }) .catch(err => { console.log(err) }) }, handleSizeChange(val) { this.pageSize = val; console.log(`每页 ${val} 条`); }, handleCurrentChange(val) { this.currentPage = val; console.log(`当前页: ${val}`); } }, data() { return { currentPage: 1, pageSize: 30, currentTotal: 0, tableData: [] } } } </script>
正道的光终将来临,当太阳升起的时候,光芒总会普照大地温暖人间。些许的阴霾也终会有被阳光洒满的一天
今天的文章前端分页_JS前端分页逻辑分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/47204.html