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

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

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

瀏覽:5日期: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
相關文章:
主站蜘蛛池模板: 成都治疗尖锐湿疣比较好的医院-成都治疗尖锐湿疣那家医院好-成都西南皮肤病医院 | 称重传感器,测力传感器,拉压力传感器,压力变送器,扭矩传感器,南京凯基特电气有限公司 | 活性氧化铝|无烟煤滤料|活性氧化铝厂家|锰砂滤料厂家-河南新泰净水材料有限公司 | lcd条形屏-液晶长条屏-户外广告屏-条形智能显示屏-深圳市条形智能电子有限公司 | ORP控制器_ORP电极价格-上优泰百科 | 海水晶,海水素,海水晶价格-潍坊滨海经济开发区强隆海水晶厂 | 车充外壳,车载充电器外壳,车载点烟器外壳,点烟器连接头,旅行充充电器外壳,手机充电器外壳,深圳市华科达塑胶五金有限公司 | 沧州友城管业有限公司-内外涂塑钢管-大口径螺旋钢管-涂塑螺旋管-保温钢管生产厂家 | led太阳能路灯厂家价格_风光互补庭院灯_农村市政工程路灯-中山华可路灯品牌 | 钢托盘,铁托盘,钢制托盘,镀锌托盘,饲料托盘,钢托盘制造商-南京飞天金属13260753852 | 消防泵-XBD单级卧式/立式消防泵-上海塑泉泵阀(集团)有限公司 | 飞飞影视_热门电影在线观看_影视大全 | 缠绕机|缠绕膜包装机|缠绕包装机-上海晏陵智能设备有限公司 | 物联网卡_物联网卡购买平台_移动物联网卡办理_移动联通电信流量卡通信模组采购平台? | 东莞螺杆空压机_永磁变频空压机_节能空压机_空压机工厂批发_深圳螺杆空压机_广州螺杆空压机_东莞空压机_空压机批发_东莞空压机工厂批发_东莞市文颖设备科技有限公司 | 铝合金电阻-无源谐波滤波器-上海稳达电讯设备厂 | 芝麻黑-芝麻黑石材厂家-永峰石业 | 臻知网大型互动问答社区-你的问题将在这里得到解答!-无锡据风网络科技有限公司 | 福州仿石漆加盟_福建仿石漆厂家-外墙仿石漆加盟推荐铁壁金钢(福建)新材料科技有限公司有保障 | 噪声治理公司-噪音治理专业隔音降噪公司 | CE认证_FCC认证_CCC认证_MFI认证_UN38.3认证-微测检测 CNAS实验室 | 氢氧化钾厂家直销批发-济南金昊化工有限公司 | 专注提供国外机电设备及配件-工业控制领域一站式服务商-深圳市华联欧国际贸易有限公司 | 郑州大巴车出租|中巴车租赁|旅游大巴租车|包车|郑州旅游大巴车租赁有限公司 | 老房子翻新装修,旧房墙面翻新,房屋防水补漏,厨房卫生间改造,室内装潢装修公司 - 一修房屋快修官网 | 祝融环境-地源热泵多恒系统高新技术企业,舒适生活环境缔造者! | 婚博会2024时间表_婚博会门票领取_婚博会地址-婚博会官网 | 圆盘鞋底注塑机_连帮鞋底成型注塑机-温州天钢机械有限公司 | 杭州高温泵_热水泵_高温油泵|昆山奥兰克泵业制造有限公司 | 不锈钢复合板|钛复合板|金属复合板|南钢集团安徽金元素复合材料有限公司-官网 | 地磅-地秤-江阴/无锡地磅-江阴天亿计量设备有限公司_ | 杜康白酒加盟_杜康酒代理_杜康酒招商加盟官网_杜康酒厂加盟总代理—杜康酒神全国运营中心 | 袋式过滤器,自清洗过滤器,保安过滤器,篮式过滤器,气体过滤器,全自动过滤器,反冲洗过滤器,管道过滤器,无锡驰业环保科技有限公司 | 不锈钢水箱厂家,不锈钢保温水箱-山东桑特供水设备 | RS系列电阻器,RK_RJ启动调整电阻器,RQ_RZ电阻器-上海永上电器有限公司 | 世界箱包品牌十大排名,女包小众轻奢品牌推荐200元左右,男包十大奢侈品牌排行榜双肩,学生拉杆箱什么品牌好质量好 - Gouwu3.com | 氧化铝球_高铝球_氧化铝研磨球-淄博誉洁陶瓷新材料有限公司 | 精密模具-双色注塑模具加工-深圳铭洋宇通 | 雷蒙磨,雷蒙磨粉机,雷蒙磨机 - 巩义市大峪沟高峰机械厂 | 编织人生 - 权威手工编织网站,编织爱好者学习毛衣编织的门户网站,织毛衣就上编织人生网-编织人生 | 大鼠骨髓内皮祖细胞-小鼠神经元-无锡欣润生物科技有限公司 |