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

来源:脚本之家  责任编辑:小易  

>的我就不会了首页上一页下一页末页当前第#页共#页可以不?回楼主,这几天我一直在琢磨你这个事情.想了个笨方法,就是分页按钮只能是静态的只能固定5个或者8个这种你明白我的思路吗?www.zgxue.com防采集请勿采集本网。

本文实例为大家分享了Vue+Element-U实现分页显示效果的具体代码,供大家参考,具体内容如下

section Script或者RenderSection都可以实现,你可以搜一下

当我们从后端返回的数据量很大,并且根据需求我们需要将返回的数据全部都显示在页面中,默认情况下会把所有的数据全部显示在一个页面,这样非常影响视觉和页面的使用,所以需要使用分页

在jsp中使用js中的设置属性,进而获得session保存的属性值,实例如下: session设置: session.setAttribute("username",username); session.setAttribute("password",password); session获取: username=session.getAttribute("username"); pas

我这次使用的是Vue4.0 +  Element-UI组件,Element-UI库非常的丰富,它提供了一个分页组件 Pagination

mian.js里怎么引入就怎么用 比如a.js里想用elementUI的组件就这样 import ElementUI from "element-ui";ElementUI.Message ({ title: '警告', message: '网页还没下载完毕,请稍等一下再操作', type: 'warning'});

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

要输入代码。 html: {{item.title}} varapp=newVue({ el:'#app', data:{ questionnaireList:[],//定义一个空数组 currentPage:1,//当前页 }, //加载完后自动执行 mounted:function(){ varthat=this; that.questionnaireData();//调用方法 }, me

HTML部分:

仅仅设置 document.body 可能会有兼容性问题,可如下设置 document.body.scrollTop = 0document.documentElement.scrollTop = 0

<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)*pageSizeSELECT 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;

  <vuetable listdata="{{datalist}}" clickcallback="{{callback}}"></vuetable>  <pages pages="{{@ pages}}" clickhandle="{{search}}"></pages>  其中vuetable组件负责数据展示功e69da5e6ba903231313335323631343130323136353331333361326333能,里面内容暂且不表,pages组件实现分页功能,如下:  升散<div>  <ul>  <li v-on="click:leftclick" v-show="leftbtn"><a>《</a></li>  <li class="pageindex" v-repeat="showlength" v-on="click:clickhandle(currentIndex+$index,$event)"><a>{{currentIndex+$index}}</a></li>  <li v-on="click:rightclick" v-show="rightbtn"><a></a></li>  </ul> 晌芹 </div>  class为pageindex的 li 的点击事件里面将 要显示的index 传给 props传递过来的 clickhandle,  clickhandle会宴笑毕根据index,返回后更新 datalist,完成分页功能。本回答被提问者采纳,  复<vuetablelistdata="{{datalist}}"clickcallback="{{callback}}"></vuetable>  制<pagespages="{{@pages}}"clickhandle="{{search}}"></pages>  其中vuetable组件bai负责数据展示功能,du里面内容暂zhi且不表,pages组件实现dao分页功能,如下:  <div>  <ul>  <liv-on="click:leftclick"v-show="leftbtn"><a>《</a></li>  <liclass="pageindex"v-repeat="showlength"v-on="click:clickhandle(currentIndex+$index,$event)"><a>{{currentIndex+$index}}</a></li>  <liv-on="click:rightclick"v-show="rightbtn"><a></a></li>  </ul>  </div>  class为pageindex的li的点击事件里面将要显示的index传给props传递过来的clickhandle,  clickhandle会根据index,返回后更新datalist,完成分页功能内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • vue动态修改网页标题的方法及遇到问题
  • 详解vue.js和layui日期控件冲突问题解决办法
  • 用vue 实现手机触屏滑动功能
  • vue实现把接口单独存放在一个文件方式
  • 详解vue表单——小白速看
  • vue弹出框组件封装实例代码
  • vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
  • 基于iview中on-change属性的使用详解
  • vue-cropper 图片裁剪的基本原理及思路讲解
  • 详解vue项目中出现loading chunk {n} failed问题的解决方法
  • vue.js中怎么实现分页显示
  • 怎样让vue.js分页多余的用省略号显示
  • vue.js 的分页标签怎么修改
  • vuejs 返回json数据怎么循环渲染到页面
  • C# MVC Vue element-ui ,使用mvc分布页如何提取vu...
  • vue.js使用element-ui改写一个多级联动的选择器
  • vue 公共js中怎么使用element ui 的提示组件
  • vue从后台获取的数据有html标签通过v-html渲染到页...
  • 页面回到顶部的效果用Vue.js怎么实现
  • 如何利用Vue.js库中的v-show显示和隐藏元素?
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.js其它首页javascriptjavascript类库vue form 表单提交+ajax异步请求+分页效果利用vue + element实现表格分页和前端搜索的方法vue+element-ui 实现表格的分页功能示例vue2.5 结合 element ui 之 table 和 pagination 组件实现分页功能vue.js实现多条件筛选、搜索、排序及分页的表格功能基于vue.js的表格分页组件vue+element-ui前端实现分页效果vue+element-ui实现分页效果详解vue修改elementui的分页组件视图没更新问题html+vue.js 实现漂亮分页功能可兼容ievue动态修改网页标题的方法及遇到问题详解vue.js和layui日期控件冲突问题解决办法用vue 实现手机触屏滑动功能vue实现把接口单独存放在一个文件方式详解vue表单——小白速看vue弹出框组件封装实例代码vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】基于iview中on-change属性的使用详解vue-cropper 图片裁剪的基本原理及思路讲解详解vue项目中出现loading chunk {n} failed问题的解决方法vue引用js文件的多种方式(推荐)vue之父子组件间通信实例讲解(prvue props用法详解(小结)简单理解vue中props属性详解vue 路由跳转四种方式 (带参vue元素的隐藏和显示(v-show指令vue.js常用指令汇总(v-if、v-fovue 进阶教程之v-model详解使用vue实现图片上传的三种方式vue实现文件上传功能基于vue.js实现分页查询功能vue.js教程之计算属性vue如何集成raphael.js中国地图的方法示例vue中阻止click事件冒泡,防止触发另一个事详解vue-cli 本地开发mock数据使用方法vue实现一个6个输入框的验证码输入组件功vee-validate vue 2.0自定义表单验证的实仿elementui实现一个form表单的实现代码vue生命周期activated之返回上一页不重新关于vue.nexttick()的正确使用方法浅析
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved