Vue樹表格分頁的實現(xiàn)方法詳解
1. 準備工作
- 創(chuàng)建測試數(shù)據(jù)庫
- 準備好后臺服務接口,Moudel查詢,和Book查詢(支持分頁)
- 后臺單元測試
- 修改vue配置,使用真實環(huán)境
2. 動態(tài)樹
2.1 在配置請求路徑
在src/api/action.js中配置獲取動態(tài)樹數(shù)據(jù)的請求路徑
export default { //服務器 'SERVER': 'http://localhost:8080/webserver', //登陸請求 'SYSTEM_USER_DOLOGIN': '/userMsg/userAction!login.action', //登陸 //獲取動態(tài)樹數(shù)據(jù)請求 'SYSTEM_MODULE_REQ': '/sysMsg/sysMsgAction!getModules.action', //獲取完整的請求地址 'getFullPath': k => { //獲得請求的完整地址,用于mockjs測試時使用 return this.SERVER + this[k]; } }
2.2 使用動態(tài)數(shù)據(jù)構(gòu)建導航菜單
2.2.1 通過接口獲取數(shù)據(jù)
LeftAside.vue:
//聲明周期鉤子函數(shù),此時的Vue實例已經(jīng)創(chuàng)建,且data和methods已經(jīng)創(chuàng)建,但沒有開始編譯模板 //利用該鉤子函數(shù)獲取動態(tài)樹數(shù)據(jù) created: function() { let url = this.axios.urls.SYSTEM_MODULE_REQ; this.axios.get(url, {}).then(resp => { //在data中聲明moduleDatas數(shù)組,接收返回的數(shù)據(jù),以便于在template中使用數(shù)據(jù)雙向綁定 this.moduleDatas = resp.data; console.log(resp.data); }).catch(resp => {}); //登錄成功后默認顯示系統(tǒng)首頁 this.$router.push("/Home"); }
測試,通過控制臺查看數(shù)據(jù)是否正常獲?。?/p>
2.2.2 通過后臺獲取的數(shù)據(jù)構(gòu)建菜單導航
先構(gòu)建一級導航菜單
LeftAside.vue:
<el-submenu v-for="(m1) in moduleDatas" :key="m1.id" :index="'index_'+m1.id"> <template slot="title"> <i :class="m1.icon"></i> <span slot="title">{{m1.text}}</span> </template> </el-submenu>
頁面效果:
構(gòu)建二級導航菜單
LeftAside.vue:
<!-- 使用v-for生成二級導航菜單,index為功能url值,二級菜單為葉子節(jié)點,為具體功能的功能菜單, 所以url一定有值(一級菜單的url為空)。 測試數(shù)據(jù)二級菜單沒有分組,所以不用el-menu-item-group,只要生成el-menu-item即可。 --> <el-menu-item v-for="m2 in m1.childrens" :key="m2.id" :index="m2.url"> <span>{{m2.text}}</span> </el-menu-item>
頁面效果:
2.3 點擊菜單實現(xiàn)路由跳轉(zhuǎn)
2.3.1 創(chuàng)建書本管理組件
t_module_vue表中已經(jīng)配置了功能url,為方便,將書本管理組件定義為BookList。如果使用其他名字則需要修改功能url配置,保持一致。
2.3.2 配置路由
2.3.3 修改LeftAside組件
2.3.4 修改Main組件
3. 系統(tǒng)首頁配置
首先創(chuàng)建一個首頁組件
在Main組件中指定的<router-view/>是用于顯示各功能組件的。
配置路由:
配置首頁菜單:
菜單圖標可以到官網(wǎng)去查找。
設置登錄成功后默認顯示系統(tǒng)首頁:
<!--設置首頁菜單及其圖標,index設置的是Home組件的path--> <el-menu-item key="home" index="/Home"> <i class="el-icon-s-home"></i> <span>首頁</span> </el-menu-item>
4. 表格數(shù)據(jù)顯示
4.1 頁面布局
頁面上使用的面包屑,查詢條件,表格,分頁等空間,可以查看element-ui官網(wǎng)。該步驟主要關注頁面布局,并沒有綁定數(shù)據(jù),編寫完成后,觀察頁面效果。
BookList.vue:
<template> <div style="margin-left: 15px; margin-right: 15px;"> <!--面包屑--> <el-breadcrumb style="margin-top:15px;" separator="/"> <el-breadcrumb-item :to="{path: '/Home'}">首頁</el-breadcrumb-item> <el-breadcrumb-item>書本管理</el-breadcrumb-item> </el-breadcrumb> <!--查詢條件--> <el-form style="margin-top: 15px;" :inline="true" class="demo-form-inline"> <el-form-item label="書名"> <el-input placeholder="書名"></el-input> </el-form-item> <el-form-item> <el-button type="primary">查詢</el-button> <el-button type="primary">新增</el-button> </el-form-item> </el-form> <!--表格--> <el-table style="width: 100%;" :border="true" max-height="550"> <el-table-column prop="id" label="編號" min-width="40" align="center"></el-table-column> <el-table-column prop="bookname" label="名稱" min-width="100" align="center"></el-table-column> <el-table-column prop="price" label="價格" min-width="70" align="center"></el-table-column> <el-table-column prop="booktype" label="類型" min-width="70" align="center"></el-table-column> </el-table> <!--分頁--> <div class="block" style="text-align:right;margin-top:10px;"> <el-pagination :page-sizes="[10, 20, 30, 40]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400"> </el-pagination> </div> </div> </template>
4.2 查詢并在表格中顯示數(shù)據(jù)
先不考慮分頁,從后臺接口獲取數(shù)據(jù)并綁定到表格顯示。
將查詢書本信息的接口配置到api/action.js中
//獲取書本信息 'BOOKMSG_BOOKINFO_REQ':'/bookMsg/bookAction!getBooks.action',
BookList.vue組件
圖一: template部分:
圖二: script部分
export default { name: 'BookList', data: function() { return { bookname: '', books: [] } }, methods: { qry: function() { let url = this.axios.urls.BOOKMSG_BOOKINFO_REQ; this.axios.post(url, { bookname: this.bookname }).then(resp => { console.log(resp); this.books = resp.data.data; }).catch(error => { console.log(error); }); } } }
4.3 實現(xiàn)分頁
template部分:
<!--分頁--> <div class="block" style="text-align:right;margin-top:10px;"> <!-- @size-chang: 定義在每頁顯示的記錄數(shù)變化時的處理函數(shù) @current-change:當前頁碼發(fā)生變化時的處理函數(shù),如點擊頁碼或輸入一個特定頁碼。 :current-page:指定當前頁, :page-size:每頁顯示的記錄數(shù) layout: 布局,可以通過調(diào)整該項來調(diào)整顯示內(nèi)容 :total: 總記錄數(shù) --> <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div>
script部分,圖一
qry: function() { let url = this.axios.urls.BOOKMSG_BOOKINFO_REQ; this.axios.post(url, { bookname: this.bookname, //分頁參數(shù) page: this.page, rows: this.rows }).then(resp => { console.log(resp); this.books = resp.data.data; //獲取總頁數(shù) this.total = resp.data.total; }).catch(error => { console.log(error); }); }
script部分,圖二:
//當每頁顯示的記錄數(shù)發(fā)生變化時,設置當前頁碼為1,執(zhí)行查詢。 handleSizeChange: function(rows) { this.rows = rows; this.page = 1; this.qry(); }, //當前頁碼發(fā)生變化時,執(zhí)行查詢 handleCurrentChange: function(page) { this.page = page; this.qry(); }
到此這篇關于Vue樹表格分頁的實現(xiàn)方法詳解的文章就介紹到這了,更多相關Vue樹表格分頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
關于vue項目vue-cli-service啟動報錯失敗問題的解決方法
前端拉取代碼后,想要運行代碼的時候可以能遇到啟動報錯的問題,這里我們只針對于vue-cli-service報錯項來說,文中通過圖文結(jié)合的方式給大家介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-08-08解決Mint-ui 框架Popup和Datetime Picker組件滾動穿透的問題
這篇文章主要介紹了解決Mint-ui 框架Popup和Datetime Picker組件滾動穿透的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11axios 實現(xiàn)post請求時把對象obj數(shù)據(jù)轉(zhuǎn)為formdata
今天小編就為大家分享一篇axios 實現(xiàn)post請求時把對象obj數(shù)據(jù)轉(zhuǎn)為formdata,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10vue 2 實現(xiàn)自定義組件一到多個v-model雙向數(shù)據(jù)綁定的方法(最新推薦)
有時候我們需要對一個組件綁定自定義 v-model,以更方便地實現(xiàn)雙向數(shù)據(jù),例如自定義表單輸入控件,這篇文章主要介紹了vue 2 實現(xiàn)自定義組件一到多個v-model雙向數(shù)據(jù)綁定的方法,需要的朋友可以參考下2024-07-07Vue簡易注冊頁面+發(fā)送驗證碼功能的實現(xiàn)示例
本文主要介紹了Vue簡易注冊頁面+發(fā)送驗證碼功能的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-11-11vue.js實現(xiàn)點擊后動態(tài)添加class及刪除同級class的實現(xiàn)代碼
這篇文章主要介紹了vue.js實現(xiàn)點擊后動態(tài)添加class及刪除同級class的相關資料,需要的朋友可以參考下2018-04-04