vue中使用element組件的Layout佈局和Button按鈕實現分頁

1.安裝elementUI:npm i element-ui -S
2.引入elementUI組件(main.js文件中)
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element, { size: 'small' })
3.訪問Element官網【組件–Layout佈局,組件–Button按鈕】

PS:el-row標籤使用flex佈局,justify屬性指定end來定義子元素的排版方式。子元素使用el-button標籤,點擊上一頁和下一頁。
上一頁 pageNum 下一頁 pagesum
在這裏插入圖片描述

4.data( )中定義第幾頁pageNum,總頁數pagesum,數組長度arrsum

在這裏插入圖片描述

5.點擊上一頁或下一頁

PS:pageNum- -或+ +,但是不能 <1 也不能 >pagesum。發送請求時,url帶上參數userId,pageNum,rows=10(表示前端規定每頁展示10條數據),請求成功後臺返回數組長度arrsum,總頁數pagesum=arrsum/10(這一步應該放在created函數中)在這裏插入圖片描述

6.分頁效果圖如下

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章