Vue開發實戰五 專案分頁列表模組載入

2021-10-21 11:05:59 字數 1936 閱讀 8278

專案中常用list分頁,在mixins中整合分頁列表,實現模組功能復用。

import qs from

'qs'

export

default

,// 預設屬性

dataform:

,// 查詢條件

datalist:

,// 資料列表

page:1,

// 當前頁碼

limit:20,

// 每頁數

total:0,

// 總條數

datalistloading:

false

,// 資料列表,loading狀態}}

,created()

},activated()

},methods:))

.then

((res)

=>

this

.datalist =

this

.mixinviewmoduleoptions.getdatalistispage ? res.data.rows : res.data.rows

this

.total =

this

.mixinviewmoduleoptions.getdatalistispage ? res.data.total :0}

).catch((

)=>)}

,// 分頁, 每頁條數

pagesizechangehandle

(val)

,// 分頁, 當前頁

pagecurrentchangehandle

(val)

, getdatalist:

function()

}}

import mixinviewmodule from "@/mixins/js的檔名;

mixins:

[mixinviewmodule]

,let address =

'網路請求路徑'

mixinviewmoduleoptions:

, datalist:

,v-loading=

"datalistloading"

:data=

"datalist"

border

style=

"width: 100%"

>

<

/el-table>

:current-page=

"page"

:page-sizes=

"[20, 50, 100,500,1000,2000,5000]"

:page-size=

"limit"

:total=

"total"

layout=

"total, sizes, prev, pager, next, jumper"

@size-change=

"pagesizechangehandle"

@current-change=

"pagecurrentchangehandle"

/>

說明:頁面中datalist代表獲取的所有資料列表,名稱固定,在mixins中已經定義了,因此,之後所有的頁面接受分頁列表的資料的值都為datalist。然後將el-table下的字段都繫結字段值即可拿到資料的分頁列表。el-pagination定義了資料分頁的樣式, 可以參考官網更改,其中的引數limit和total都是在mixins中定義好了,欄位不需要更改,步驟2中的引入資料基本都不需要更改,需要在步驟1中更改網路請求的引數及網路請求返回標識判斷

實驗五專案三

檔名稱 完成日期 2017年4月24日 版本號v1.0 對任務及求解方法的描述部分 輸入描述 問題描述 程式輸出 問題分析 演算法設計 一問題及 include include using namespace std class book public void setbook string na,...

團隊專案(五)專案回顧

專案 內容所屬課程 18安卓軟體工程 作業簡介 按照專案回顧模板開展事後諸葛亮會議並撰寫回顧報告 作業要求 團隊專案 任務五 專案回顧 作業目的 通過回顧軟體設計 開發 測試 構建 發布的整個過程以及團隊合作狀態總結經驗教訓 參考資料 構建之法 學生姓名 呂家正 倉庫 會議地點 線上會議 參會人員 ...

團隊專案五(專案回顧)

專案內容 所屬課程 18級安卓軟體工程 作業簡介 按照專案回顧模板開展事後諸葛亮會議並撰寫回顧報告 作業要求 團隊專案 任務五 專案回顧 作業目的 通過回顧軟體設計 開發 測試 構建 發布的整個過程以及團隊合作狀態總結經驗教訓 參考資料 菜鳥 學生姓名 張鑫 倉庫 俄羅斯方塊大全 姓名職務 回顧總結...