这篇文章将为大家详细讲解有关“基于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;

到此这篇关于“基于Vue怎么用Element-U库实现分页，具体过程是什么”的文章就介绍到这了,更多相关基于Vue怎么用Element-U库实现分页，具体过程是什么内容，欢迎关注群英网络技术资讯频道，小编将为大家输出更多高质量的实用文章！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• canvas中物体的框选功能怎样实现，代码是什么

  目录前言框选的实现Group 类的实现小结前言虽然这两个月基金涨的还行，但是离回本还有一大大大段距离????。今天呢，我们要实现的是 canvas 中物体的框选功能，大概就像下面这个样子：然后话不多说，直接开撸 ✍????框选的实现先来说下拖蓝选区（鼠标拖拽区域）的实现方式吧，仔细观察你会发现选区其实就是个普通矩形，这个区域由鼠标

• 怎样使用useState实现修改表格数据的需求

  目录如何实现在当前表格直接更改数据需求效果如下具体做法useState修改对象的字段如何实现在当前表格直接更改数据需求用户点击修改按钮时直接在弹出框的当前页面内直接再次修改点击行相关信息：效果如下点击修改当事人信息时，直接将当前改为输入框，并将信息展示，同时操作栏内的内容变为保存和取消;具体做法我这里是使用的antd组

• JavaScript中箭头函数和用法是什么，怎样应用？

  这篇文章我们来了解JavaScript中箭头函数的内容，下文介绍了什么是箭头函数，箭头函数的使用及不适用的场景等等，文中介绍很详细，有需要的朋友可以参考，感兴趣的朋友接下来就跟随小编来了解看看吧！

• Next.js使用用来做什么，具体是怎样的

  Next.js 是一个轻量级的 React 服务端渲染应用框架。文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧

• 用jQuery怎样实现常见的DOM操作，方法是什么

  本篇文章给大家总结分享一些使用jQuery实现的DOM操作，包括节点创建、节点插入、删除、复制与替换、遍历以及筛选等，希望对大家有所帮助！