工作一段時間后大多應(yīng)用于elementui進(jìn)行頁面的搭建梭灿，在和后臺進(jìn)行對接時發(fā)現(xiàn)了一些問題希望整理出來能幫助大家坷随，自己學(xué)習(xí)
- 先看一下平時elementui分頁器的使用
<div class="block">
<span class="demonstration">完整功能</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
<script>
export default {
methods: {
handleSizeChange(val) {
console.log(`每頁 ${val} 條`);
},
handleCurrentChange(val) {
console.log(`當(dāng)前頁: ${val}`);
}
},
data() {
return {
currentPage: 5,
};
}
}
</script>
看一下效果··
page1.png
- 但是在實(shí)際的與后臺交互的過程中不單只是將從后臺獲取到的數(shù)據(jù)單純的綁定到table上還要考慮當(dāng)table的數(shù)據(jù)過多時是否應(yīng)該限制獲取的數(shù)據(jù)而不是全部獲取碾局，按需加載屠列，當(dāng)用戶點(diǎn)擊下一頁或者改變表單時再進(jìn)行數(shù)據(jù)的請求
總之大概就是數(shù)據(jù)不一次獲取而是根據(jù)用戶的點(diǎn)擊選擇來進(jìn)行獲取減輕服務(wù)器的壓力及等待時間
- 首先設(shè)置分頁器
<el-pagination
:current-page="currentPage"
:page-sizes="[5,10]"
:page-size="pagesize"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
// 傳第幾頁岸啡，頁數(shù)限制
PageAxios (page, limit) {
let _this = this
this.$axios
.post(this.QueryUrl, {
page,
limit
})
.then(res => {
console.log(res.data)
console.log(res.data.rows)
let total = res.data.total // 返回頁面總數(shù)
let limit = res.data.limit // 返回頁數(shù)限制
// let page = res.data.page // 返回第幾頁
_this.tableData = res.data.rows
// _this.currentPage = page // 初始頁
_this.total = total // 獲取頁面總數(shù)
_this.pagesize = limit // 初始頁
})
封裝后的方法調(diào)用就十分的簡單,只需要傳入頁面的初始頁亭敢，和每一頁的限制就可以了
// 頁面加載獲取初始值
handleDataGet () {
this.PageAxios(1, this.pagesize)
},
// 控制頁面頁數(shù)
handleSizeChange: function (size) {
this.PageAxios(1, size)
},
// 點(diǎn)擊第幾頁
handleCurrentChange: function (currentPage) {
this.PageAxios(currentPage, this.pagesize)
}
看一下效果··
page2.png
page3.png
page4.png
可以通過控制currentPage，pagesize 這2個變量來控制每次請求的頁數(shù)及其請求的條數(shù)
- 附帶一個elementui的用戶提示框 可以根據(jù)與后臺約定的code參數(shù)完成提示
// 封裝用戶提示
msgalert (res, _this) {
//請求成功
if (res.data.code === 200) {
this.$message({
message: res.data.msg,
type: 'success'
})
this.httpGet()
} else {
// 提示用戶
console.log(res.data.msg)
this.$message.error(res.data.msg)
}
}
handle () {
let _this = this
this.$axios
.post(this.$store.state.BaseUrl)
.then(res => {
console.log(res.data)
_this.msgalert(res, _this)
})
.catch(e => {
console.log(e)
})
},
可以多次調(diào)用
message.png
結(jié)語
附上項目地址如果碰巧對大家能夠有幫助那真的是太好啦墨状，希望大家多給我一些鼓勵卫漫。
