封裝一個優(yōu)雅的element ui表格組件

singerye 發(fā)布于2019-08-23 14:00 / 1939人閱讀

摘要：現(xiàn)在做后臺系統(tǒng)用的越來越多，那的組件肯定也離不開。雖然的組件很好。這個就比較麻煩了。那我們可不可以把表格和分頁封裝在一起呢照這個思路那我們重新封裝一個帶分頁的表格。

現(xiàn)在做后臺系統(tǒng)用vue + elementUI 的越來越多，那element ui的 el-table 組件肯定也離不開。雖然element ui的table組件很好。但是表格和分頁是分離的。每次寫表格的時候都要寫分頁。這個就比較麻煩了。那我們可不可以把表格和分頁封裝在一起呢？照這個思路那我們重新封裝一個帶分頁的表格。

思路：

表格組件要包含分頁，不用每次都重新寫分頁

盡量保證el-table原生方法

方便易用

照這個思路我們開始寫代碼
先把表格和分頁寫在一起

別人使用起來非常簡單 ,也不用再寫任何請求方法
可以全局引入

 
    //下面的使用方式和el-table一樣

如果想刷新數(shù)據(jù) 使用reload方法即可. this.$refs.table.reload()

GPU云服務(wù)器云服務(wù)器 element-ui dialog組件 element-ui 一個封裝的Ajax類 ui組件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99928.html

相關(guān)文章

vue封裝element-ui的table組件,靈活配置表頭實現(xiàn)表格內(nèi)編輯，按鈕，鏈接等功能。

摘要：一封裝的組件定義表格高度全屏增加前臺分頁功能。表格內(nèi)編輯后，自動選中該行。單元格內(nèi)數(shù)據(jù)樣式單元格內(nèi)按鈕，可多個。觸發(fā)組件綁定函數(shù)，參數(shù)按鈕名稱，按鈕樣式，按鈕事件標識。單元格是否可點擊的判斷函數(shù)，可進行復(fù)雜的函數(shù)判斷。 vue-bxz-table 一、封裝element-ui的table組件：定義表格高度全屏增加前臺分頁功能。自定義表頭，循環(huán)輸出整體表結(jié)構(gòu)。表格內(nèi)編輯（輸入框...

henry14 2019-08-26 13:30 評論0 收藏0
手摸手，帶你用vue擼后臺系列三(實戰(zhàn)篇)

摘要：社區(qū)的認可目前已經(jīng)是相關(guān)最多的開源項目了，體現(xiàn)出了社區(qū)對其的認可。監(jiān)聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺系列一(基礎(chǔ)篇)系類文章二：手摸手，帶你用vue擼后臺系列二(登錄權(quán)限篇)系類文章三：手摸手，帶你用vue擼后臺系列三(實戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺系列...

Channe 2019-08-20 17:15 評論0 收藏0
手摸手，帶你用vue擼后臺系列三(實戰(zhàn)篇)

摘要：社區(qū)的認可目前已經(jīng)是相關(guān)最多的開源項目了，體現(xiàn)出了社區(qū)對其的認可。監(jiān)聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺系列一(基礎(chǔ)篇)系類文章二：手摸手，帶你用vue擼后臺系列二(登錄權(quán)限篇)系類文章三：手摸手，帶你用vue擼后臺系列三(實戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺系列...

zgbgx 2019-08-29 12:46 評論0 收藏0
D2 Crud，一款簡單易用的表格組件

摘要：是一套基于和的表格組件。將的功能進行了封裝，并增加了表格的增刪改查數(shù)據(jù)校驗表格內(nèi)編輯等常用的功能。大部分功能可由配置實現(xiàn)，在實現(xiàn)并擴展了表格組件功能的同時，降低了開發(fā)難度，減少了代碼量，大大簡化了開發(fā)流程。 D2-Crud 是一套基于Vue.js 2.2.0+ 和 Element UI 2.0.0+ 的表格組件。D2-Crud 將 Element 的功能進行了封裝，并增加了表格的增刪改...

fevin 2019-08-23 11:43 評論0 收藏0
【收藏】2019年最新Vue相關(guān)精品開源項目庫匯總

摘要：前言本文的前身是源自上的項目但由于該項目上次更新時間為年月日，很多內(nèi)容早已過期或是很多近期優(yōu)秀組件未被收錄，所以小肆今天重新更新了內(nèi)容并新建項目。提交的項目格式如下項目名稱子標題相關(guān)介紹如果收錄的項目有錯誤，可以通過反饋給小肆。前言本文的前身是源自github上的項目awesome-github-vue,但由于該項目上次更新時間為2017年6月12日，很多內(nèi)容早已過期或是很多近期優(yōu)...

williamwen1986 2019-08-23 14:50 評論0 收藏0