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查到的數據放在我們的表格里

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

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

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

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

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

定義一個空的數組

然后把我們查到的數據放到我們的數組里面

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

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

放進去后顯示是這樣的

分頁

引入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"：設置每頁可以有幾條數據

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

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