Vue使用Axios和elementui實(shí)現(xiàn)查詢分頁(yè)功能
Vue用Axios和elementui實(shí)現(xiàn)查詢分頁(yè)
安裝axios和elementui
我們需要先在我們的終端里安裝我們的這兩個(gè)東西
安裝axios:
npm install axios --save-dev
安裝elementui
npm i -D element-plus
安裝好之后在我們的vue項(xiàng)目里的package.json的文件里就可以看到
查詢
現(xiàn)在把我們用axios查到的數(shù)據(jù)放在我們的表格里
先創(chuàng)建一個(gè)我們的vue文件
創(chuàng)建好后先引入我們的axios
引入后我們開(kāi)始通過(guò)我們的路徑去查詢數(shù)據(jù)
路徑就是我們sql語(yǔ)句的查詢路徑，SQL語(yǔ)句略
getSelect() {
//get請(qǐng)求
axios.get("http://localhost:8899/select",{
params:{
pageNum:this.pagelist.currentPage4,
pageSize:this.pagelist.pageSize4
}
}).then(res =>{
//res.data 代表的是后臺(tái)響應(yīng)的數(shù)據(jù)
console.log(res);//注意：沒(méi)有Result不需要兩個(gè)data
this.empList=res.data.students
this.pagelist.total=res.data.total
}).catch(function(){
console.log("失敗")
})
},定義一個(gè)空的數(shù)組
然后把我們查到的數(shù)據(jù)放到我們的數(shù)組里面
最后在瀏覽器上大概是這個(gè)樣子，每次調(diào)用這個(gè)方法的時(shí)候就會(huì)查詢到所有數(shù)據(jù)并把數(shù)據(jù)放在我們定義的那個(gè)數(shù)組里
現(xiàn)在我們用elementui里的表格，然后把數(shù)據(jù)放在表格里
放進(jìn)去后顯示是這樣的
分頁(yè)
引入elementui的分頁(yè)
<el-pagination
v-model:current-page="pagelist.currentPage4"
v-model:page-size="pagelist.pageSize4"
:page-sizes="[1, 2, 3, 4]"
:small="small"
:disabled="disabled"
:background="background"
layout="total, sizes, prev, pager, next, jumper"
:total="pagelist.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>@size-change="handleSizeChange"：設(shè)置每頁(yè)可以有幾條數(shù)據(jù)
@current-change="handleCurrentChange"：上下頁(yè)
v-model:current-page="pagelist.currentPage4"：當(dāng)前頁(yè) v-model:page-size="pagelist.pageSize4"：每頁(yè)幾條數(shù)據(jù)
最后路徑也別忘改成我們分頁(yè)查詢的路徑，SQL語(yǔ)句略
以上就是Vue使用Axios和elementui實(shí)現(xiàn)查詢分頁(yè)功能的詳細(xì)內(nèi)容，更多關(guān)于Vue Axios elementui查詢分頁(yè)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue?中?Promise?的then方法異步使用及async/await?異步使用總結(jié)
then?方法是?Promise?中?處理的是異步調(diào)用，異步調(diào)用是非阻塞式的，在調(diào)用的時(shí)候并不知道它什么時(shí)候結(jié)束，也就不會(huì)等到他返回一個(gè)有效數(shù)據(jù)之后再進(jìn)行下一步處理，這篇文章主要介紹了Vue?中?Promise?的then方法異步使用及async/await?異步使用總結(jié),需要的朋友可以參考下2023-01-01
vue+springboot實(shí)現(xiàn)登錄功能
這篇文章主要為大家詳細(xì)介紹了vue+springboot實(shí)現(xiàn)登錄功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
利用Vue3+Element-plus實(shí)現(xiàn)大文件分片上傳組件
在開(kāi)發(fā)中如果上傳的文件過(guò)大,可以考慮分片上傳,分片就是說(shuō)將文件拆分來(lái)進(jìn)行上傳,將各個(gè)文件的切片傳遞給后臺(tái),然后后臺(tái)再進(jìn)行合并,下面這篇文章主要給大家介紹了關(guān)于利用Vue3+Element-plus實(shí)現(xiàn)大文件分片上傳組件的相關(guān)資料,需要的朋友可以參考下2023-01-01
教你在vue項(xiàng)目中使用svg圖標(biāo)的方法
本文給大家介紹了在vue項(xiàng)目中使用svg圖標(biāo)的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue中常用的幾種表單rules驗(yàn)證方式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
編譯優(yōu)化指的是編譯器將模板編譯為渲染函數(shù)的過(guò)程中，盡可能多的提取關(guān)鍵信息，并以此指導(dǎo)生成最優(yōu)代碼的過(guò)程，優(yōu)化的方向主要是區(qū)分動(dòng)態(tài)內(nèi)容和靜態(tài)內(nèi)容，并針對(duì)不同的內(nèi)容采用不同的優(yōu)化策略2023-01-01
基于vue cli 通過(guò)命令行傳參實(shí)現(xiàn)多環(huán)境配置
這篇文章主要介紹了vue項(xiàng)目通過(guò)命令行傳參實(shí)現(xiàn)多環(huán)境配置(基于@vue/cli)的相關(guān)資料,需要的朋友可以參考下2018-07-07
Message組件實(shí)現(xiàn)發(fā)財(cái)U(kuò)I?示例詳解
這篇文章主要為大家介紹了Message組件實(shí)現(xiàn)發(fā)財(cái)U(kuò)I的手寫(xiě)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue實(shí)現(xiàn)網(wǎng)頁(yè)語(yǔ)言國(guó)際化切換
這篇文章介紹了vue實(shí)現(xiàn)網(wǎng)頁(yè)語(yǔ)言國(guó)際化切換的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2021-11-11
Vue3如何根據(jù)搜索框內(nèi)容跳轉(zhuǎn)至本頁(yè)面指定位置
在開(kāi)發(fā)中我們經(jīng)常遇到這樣的需求,根據(jù)要求跳轉(zhuǎn)至本頁(yè)面指定位置,這篇文章主要給大家介紹了關(guān)于Vue3如何根據(jù)搜索框內(nèi)容跳轉(zhuǎn)至本頁(yè)面指定位置的相關(guān)資料,需要的朋友可以參考下2022-11-11