yy玄幻小说排行榜完本,绝色狂妃仙魅小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

自帶分頁與loading的表格封裝

首先就是新建一個(gè)組件，名字就叫做??PageTable??，??template??里面很簡(jiǎn)單，放上表格和分頁。既然表格默認(rèn)帶有分頁，分頁的數(shù)據(jù)就放在組件內(nèi)部

創(chuàng)新互聯(lián)是專業(yè)的滑縣網(wǎng)站建設(shè)公司，滑縣接單;提供網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行滑縣網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

之后開始思考一個(gè)問題，就是表格的數(shù)據(jù)是從父組件傳進(jìn)來，還是放在組件自身。如果放在父組件里面，那么分頁的變化每次都要??emit??事件通知父組件，這樣我們把分頁和表格合在一起就失去了意義，所以表格的數(shù)據(jù)是要放在組件自身的。

表格數(shù)據(jù)放在自身，父組件就需要傳進(jìn)來一個(gè)獲取數(shù)據(jù)的方法，就叫做??fetchData??吧，在組件內(nèi)部調(diào)用這個(gè)方法，就可以獲取數(shù)據(jù)了。這個(gè)方法是需要知道當(dāng)前分頁的，并且返回?cái)?shù)據(jù)和總條數(shù)，由此就可以定義??fetchData??了

interface ResponseStructure {
  data: any[];
  total: any;
}
interface fetchData {
  (current: number, size: number): Promise
}

現(xiàn)在我們的組件已經(jīng)變成了這個(gè)樣子

表格一般都會(huì)帶有搜索項(xiàng)，搜索參數(shù)等在父組件定義，并且邏輯寫在??fetchData??里即可，組件內(nèi)部只處理通用的邏輯。父組件里點(diǎn)擊了搜索按鈕，是要觸發(fā)獲取事件的，父組件可以通過??$refs??調(diào)用組件內(nèi)部方法。目前我們定義了兩個(gè)方法??search??與??getTableData??，點(diǎn)擊搜索調(diào)用??search??就可以了，并且會(huì)自動(dòng)重置分頁，如果有不想重置分頁的情況，可以調(diào)用??getTableData??。

目前為止，數(shù)據(jù)我們已經(jīng)有了，但是并沒有展示，因?yàn)閑lement-ui的列信息(Table-column)是通過插槽的，我們使用??slot??接收一下就可以了

到了這里基本邏輯已經(jīng)完成了，再進(jìn)一步，一般我們的表格需要loading，loading應(yīng)該由父組件自己決定如何使用，但是狀態(tài)的改變由本組件處理，這里可以使用??.sync??修飾符，loading邏輯加在 ??getTableData??中即可

loading也加完了，功能就已經(jīng)完成了，但是還存在一些問題，el-table有很多的Attributes、Events和Methods，Attributes和Events我們透?jìng)鹘oel-table即可，Methods需要el-table的ref，如果父組件直接使用ref，獲取的是組件外層的div，無法獲取到el-table的ref，我們暴露一個(gè)方法拋出el-table的ref即可

至此，??PageTable??就寫完了，完整代碼如下

分享標(biāo)題：自帶分頁與loading的表格封裝
文章起源：http://fisionsoft.com.cn/article/cdjeojs.html

新聞中心

其他資訊