Vue使用Axios和elementui實現(xiàn)查詢分頁功能

更新時間：2024年06月17日 09:31:08 作者：Cao_XinYang

當今的Web開發(fā)趨勢中,前后端分離已經成為一種流行的架構模式,它將前端和后端的開發(fā)分離開來,使得前端和后端可以獨立進行開發(fā)和部署,本文給大家介紹了Vue使用Axios和elementui實現(xiàn)查詢分頁功能,需要的朋友可以參考下

Vue用Axios和elementui實現(xiàn)查詢分頁

安裝axios和elementui

我們需要先在我們的終端里安裝我們的這兩個東西

安裝axios:

npm install axios --save-dev

安裝elementui

npm i -D element-plus

安裝好之后在我們的vue項目里的package.json的文件里就可以看到

查詢

現(xiàn)在把我們用axios查到的數(shù)據放在我們的表格里

先創(chuàng)建一個我們的vue文件

創(chuàng)建好后先引入我們的axios

引入后我們開始通過我們的路徑去查詢數(shù)據

路徑就是我們sql語句的查詢路徑，SQL語句略

getSelect() {
                //get請求
                axios.get("http://localhost:8899/select",{
                        params:{
                            pageNum:this.pagelist.currentPage4,
                            pageSize:this.pagelist.pageSize4
                        }
                }).then(res =>{
                    //res.data  代表的是后臺響應的數(shù)據
                    console.log(res);//注意：沒有Result不需要兩個data
                     this.empList=res.data.students
                     this.pagelist.total=res.data.total
                }).catch(function(){
                    console.log("失敗")
                })
            },

定義一個空的數(shù)組

然后把我們查到的數(shù)據放到我們的數(shù)組里面

最后在瀏覽器上大概是這個樣子，每次調用這個方法的時候就會查詢到所有數(shù)據并把數(shù)據放在我們定義的那個數(shù)組里

現(xiàn)在我們用elementui里的表格，然后把數(shù)據放在表格里

放進去后顯示是這樣的

分頁

引入elementui的分頁

<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ù)據

@current-change="handleCurrentChange"：上下頁

v-model:current-page="pagelist.currentPage4"：當前頁 v-model:page-size="pagelist.pageSize4"：每頁幾條數(shù)據