标签:console 分页 val res 前端 message tableData log
在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>

标签:console,分页,val,res,前端,message,tableData,log 来源: https://www.cnblogs.com/sjruxe/p/15239557.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。