Vue+Element-U实现分页显示效果

本文实例为大家分享了vue+element-u实现分页显示效果的具体代码，供大家参考，具体内容如下

当我们从后端返回的数据量很大，并且根据需求我们需要将返回的数据全部都显示在页面中，默认情况下会把所有的数据全部显示在一个页面，这样非常影响视觉和页面的使用，所以需要使用分页
我这次使用的是vue4.0 +  element-ui组件，element-ui库非常的丰富，它提供了一个分页组件 pagination

展示效果：这个是获取两个时间段的上机记录

html部分：

<el-card>
 <div class="block">
 <span style="left:-100px; position:relative">
  <span class="demonstration" style='margin-right:10px'>
  开始日期
  </span>
  <el-date-picker v-model="value1" type="datetime"
  placeholder="选择日期" format="yyyy-mm-dd hh:mm:ss"
  value-format="yyyy-mm-dd hh:mm:ss">
  </el-date-picker>
 </span>
 <span style="left:-70px; position:relative">
  <span class="demonstration" style='margin-right:10px'>
 截止日期</span>
  <el-date-picker v-model="value2" type="datetime"
 placeholder="选择日期" value-format="yyyy-mm-dd hh:mm:ss"
  format="yyyy-mm-dd hh:mm:ss">
  </el-date-picker>
 </span>
 <el-button type="primary" 
style="left:-40px;position:relative" @click="linecrodlist">
 搜索
 </el-button>
 </div>
 <el-table :data="linedata" style="width: 80%;left:60px;top:20px">
 <el-table-column prop="ontime" label="上机时间">
 </el-table-column>
 <el-table-column prop="downtime" label="下机时间">
 </el-table-column>
 <el-table-column prop="spendcash" label="花费时间">
 </el-table-column>
 <el-table-column prop="spendcash" label="花费金额">
 </el-table-column>
 </el-table>
 
 <el-pagination @size-change="handlesizechange" @current-change="handlecurrentchange" :current-page="currentpage"
 :page-sizes="[1, 2, 5, 10]" :page-size="pagesize"
 layout="total, sizes, prev, pager, next, jumper"
 :total="total">
 </el-pagination>
 
</el-card>

分页控件的代码如下： 

<el-pagination @size-change="handlesizechange" @current-change="handlecurrentchange" :current-page="currentpage"
 :page-sizes="[1, 2, 5, 10]" :page-size="pagesize"
 layout="total, sizes, prev, pager, next, jumper"
 :total="total">
</el-pagination>

解析：

@size-change:这个是一个方法，当在页面改变每页显示的条数时，会触发该方法

@current-change:点击当前页改变的时候会触发该方法

:current-page:当前页数

:page-sizes:个数选择器的选项设置

:page-size:每页显示的条数

:total:总数据数量

js代码：

<script>
export default {
 data () {
 return {
 value1: '',
 value2: '',
 linedata: [],
 username: '',
 total: 0, //实现动态绑定
 pagesize: 2,
 currentpage: 1,
 
 }
 },
 methods: {
 //当改变每页显示条数的选择器时会触发的事件
 handlesizechange (size) {
 // 每页显示的数量是我们选择器选中的值size
 this.pagesize = size;
 console.log(this.pagesize);//每页下拉显示数据
 this.linecrodlist();
 },
//当改变当前页数的时候触发的事件
 handlecurrentchange (currentpage) {
 this.currentpage = currentpage;
 console.log(this.currentpage);//点击第几页
 this.linecrodlist();
 },
//获取用户上机记录的信息分页
 async linecrodlist () {
 
 //调用 获取total数据的方法
 this.counttotal();
 await this.$http.post('/line/selectinfo', {
 username: this.username,
 ontime: this.value1,
 downtime: this.value2,
 spendcash: 0,
 start: （this.currentpage-1）* this.pagesize,
 pagesize: this.pagesize
 }).then(res => {
 this.linedata = res.data;
 console.log(res.data)
 })
 },
 //获取用户总条数
 async counttotal () {
 await this.$http.post('/line/selecttotal', {
 username: this.username,
 ontime: this.value1,
 downtime: this.value2,
 }).then(res => {
 this.total = res.data;
 })
}

我们前端请求的时候需要给后端发送start 和 pagesize 这两个参数 因为具体的数据是后端通过数据库来搜索的

后台sql语句，其他层的代码我就不在这里列出

可以看到 limit  i，n

i：表示查询结果的索引值

n：为查询结果的返回数量

i 和 n之间用逗号分隔

例子：

#分页显示新闻数据，每页显示两条，这里显示第一页
select id,title,author,createdate from news_detail limit 0,2
#分页显示新闻数据，每页显示两条，这里显示第二页
select id,title,author,createdate from news_detail limit 2,2
#分页显示新闻数据，每页显示两条，这里显示第三页
select id,title,author,createdate from news_detail limit 4,2
#公用的分页sql
#第二个数：分页后每页显示几条新闻（页面容量） pagesize
#第一个数：从第几条数据开始显示（当前页码pageno-1）*pagesize
select id,title,author,createdate from news_detail 
limit （pageno-1）*pagesize,pagesize

我把(pageno-1)*pagesize 写到了前端，所以就无需在后端重复写

# 查询8条数据，索引从5到12，第6条记录到第13条记录 select * from t_user limit 5,8;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。