电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

Vue+Element-U實現分頁顯示效果

瀏覽:6日期:2022-10-28 15:55:18

本文實例為大家分享了Vue+Element-U實現分頁顯示效果的具體代碼,供大家參考,具體內容如下

當我們從后端返回的數據量很大,并且根據需求我們需要將返回的數據全部都顯示在頁面中,默認情況下會把所有的數據全部顯示在一個頁面,這樣非常影響視覺和頁面的使用,所以需要使用分頁我這次使用的是Vue4.0 + Element-UI組件,Element-UI庫非常的豐富,它提供了一個分頁組件 Pagination

展示效果:這個是獲取兩個時間段的上機記錄

Vue+Element-U實現分頁顯示效果

HTML部分:

<el-card> <div class='block'> <span style='left:-100px; position:relative'> <span 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 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' @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:這個是一個方法,當在頁面改變每頁顯示的條數時,會觸發該方法

Vue+Element-U實現分頁顯示效果

@current-change:點擊當前頁改變的時候會觸發該方法

Vue+Element-U實現分頁顯示效果

:current-page:當前頁數

:page-sizes:個數選擇器的選項設置

Vue+Element-U實現分頁顯示效果

: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語句,其他層的代碼我就不在這里列出

Vue+Element-U實現分頁顯示效果

可以看到 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 寫到了前端,所以就無需在后端重復寫

Vue+Element-U實現分頁顯示效果

# 查詢8條數據,索引從5到12,第6條記錄到第13條記錄 select * from t_user limit 5,8;

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 企业管理培训,企业培训公开课,企业内训课程,企业培训师 - 名课堂企业管理培训网 | 皮带输送机-大倾角皮带输送机-皮带输送机厂家-河南坤威机械 | 合肥卓创建筑装饰,专业办公室装饰、商业空间装修与设计。 | 聚合氯化铝厂家-聚合氯化铝铁价格-河南洁康环保科技 | 常州企业采购平台_常州MRO采购公司_常州米孚机电设备有限公司 | 全自动包衣机-无菌分装隔离器-浙江迦南科技股份有限公司 | 石家庄律师_石家庄刑事辩护律师_石家庄取保候审-河北万垚律师事务所 | 一体化预制泵站-一体化提升泵站-一体化泵站厂家-山东康威环保 | 耐酸碱泵-自吸耐酸碱泵型号「品牌厂家」立式耐酸碱泵价格-昆山国宝过滤机有限公司首页 | 健康管理师报考条件,考试时间,报名入口—首页 | 阿里巴巴诚信通温州、台州、宁波、嘉兴授权渠道商-浙江联欣科技提供阿里会员办理 | 保镖公司-私人保镖-深圳保镖公司【环宇兄弟保镖】 | 3d可视化建模_三维展示_产品3d互动数字营销_三维动画制作_3D虚拟商城 【商迪3D】三维展示服务商 广东健伦体育发展有限公司-体育工程配套及销售运动器材的体育用品服务商 | 垃圾压缩设备_垃圾处理设备_智能移动式垃圾压缩设备--山东明莱环保设备有限公司 | 圣才学习网-考研考证学习平台,提供万种考研考证电子书、题库、视频课程等考试资料 | 塑料瓶罐_食品塑料瓶_保健品塑料瓶_调味品塑料瓶–东莞市富慷塑料制品有限公司 | 耐火浇注料-喷涂料-浇注料生产厂家_郑州市元领耐火材料有限公司 耐力板-PC阳光板-PC板-PC耐力板 - 嘉兴赢创实业有限公司 | 光栅尺_Magnescale探规_磁栅尺_笔式位移传感器_苏州德美达 | 电子万能试验机_液压拉力试验机_冲击疲劳试验机_材料试验机厂家-济南众标仪器设备有限公司 | 选宝石船-陆地水上开采「精选」色选机械设备-青州冠诚重工机械有限公司 | 注浆压力变送器-高温熔体传感器-矿用压力传感器|ZHYQ朝辉 | 真空吸污车_高压清洗车厂家-程力专用汽车股份有限公司官网 | 泥浆在线密度计厂家-防爆数字压力表-膜盒-远传压力表厂家-江苏大亚自控设备有限公司 | 煤矿人员精确定位系统_矿用无线通信系统_煤矿广播系统 | 菏泽知彼网络科技有限公司| 原色会计-合肥注册公司_合肥代理记账公司_营业执照代办 | 成都软件开发_OA|ERP|CRM|管理系统定制开发_成都码邻蜀科技 | 防水套管厂家_刚性防水套管_柔性防水套管_不锈钢防水套管-郑州中泰管道 | 宝鸡市人民医院| 铝板冲孔网,不锈钢冲孔网,圆孔冲孔网板,鳄鱼嘴-鱼眼防滑板,盾构走道板-江拓数控冲孔网厂-河北江拓丝网有限公司 | 海日牌清洗剂-打造带电清洗剂、工业清洗剂等清洗剂国内一线品牌 海外整合营销-独立站营销-社交媒体运营_广州甲壳虫跨境网络服务 | 石英粉,滑石粉厂家,山东滑石粉-莱州市向阳滑石粉有限公司 | 超声骨密度仪-动脉硬化检测仪器-人体成分分析仪厂家/品牌/价格_南京科力悦 | 冻干机(冷冻干燥机)_小型|实验型|食品真空冷冻干燥机-松源 | 底部填充胶_电子封装胶_芯片封装胶_芯片底部填充胶厂家-东莞汉思新材料 | 德国进口电锅炉_商用电热水器_壁挂炉_电采暖器_电热锅炉[德国宝] | 电动手术床,医用护理床,led手术无影灯-曲阜明辉医疗设备有限公司 | 北京租车公司_汽车/客车/班车/大巴车租赁_商务会议/展会用车/旅游大巴出租_北京桐顺创业租车公司 | 10吨无线拉力计-2吨拉力计价格-上海佳宜电子科技有限公司 | 河南彩印编织袋,郑州饲料编织袋定制,肥料编织袋加工厂-盛军塑业 河南凯邦机械制造有限公司 | 意大利Frascold/富士豪压缩机_富士豪半封闭压缩机_富士豪活塞压缩机_富士豪螺杆压缩机 |