基于Element-Ui封裝公共表格組件的詳細(xì)圖文步驟
項(xiàng)目組最近需要把老項(xiàng)目拆出來表格都是獨(dú)立的需要重新封裝公共的表格組件
以下是實(shí)現(xiàn)邏輯以及部分截圖
實(shí)現(xiàn)邏輯是類似于antd-vue框架的寫法，將columns拆出來 在columns中填寫相關(guān)的表頭名字以及需要的邏輯 如 插槽 移入提示，字段值轉(zhuǎn)換…等等
因公司審查嚴(yán)格 部分截圖奉上（需要代碼可進(jìn)行圖片文字轉(zhuǎn)化）
公用的table，值為通過父組件傳遞過來
table-column進(jìn)行遍歷通過父組件傳值進(jìn)行渲染
如有多級(jí)table時(shí)，通過children進(jìn)行遍歷渲染
需要使用插槽進(jìn)行處理樣式等時(shí)，通過slot進(jìn)行處理
分頁處理同上 使用傳過來的值監(jiān)聽處理
父組件（使用表格組件）截圖
columns:數(shù)組傳值進(jìn)行遍歷
需要點(diǎn)擊的按鈕通過operate傳遞
公共部分截圖（處理了一下按鈕的展示方式 大于三個(gè)展示為更多 鼠標(biāo)移入顯示 依據(jù)具體需求個(gè)性化處理）
總結(jié)
到此這篇關(guān)于基于Element-Ui封裝公共表格組件的文章就介紹到這了,更多相關(guān)Element-Ui封裝公共表格組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
如何在vue3.0+中使用tinymce及實(shí)現(xiàn)多圖上傳文件上傳公式編輯功能
本文給大家分享tinymce編輯器如何在vue3.0+中使用tinymce及實(shí)現(xiàn)多圖上傳文件上傳公式編輯功能，tinymce安裝方法文中也給大家詳細(xì)介紹了，對(duì)vue tinymce實(shí)現(xiàn)上傳公式編輯相關(guān)知識(shí)感興趣的朋友跟隨小編一起學(xué)習(xí)下吧2021-05-05
vue2.0 + element UI 中 el-table 數(shù)據(jù)導(dǎo)出Excel的方法
下面小編就為大家分享一篇vue2.0 + element UI 中 el-table 數(shù)據(jù)導(dǎo)出Excel的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue3 Pinia如何修改全局狀態(tài)變量值問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要介紹了Vue瀑布流插件的使用示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
vue3解決各場(chǎng)景l(fā)oading過度的五種方法
這篇文章主要為大家詳細(xì)介紹了vue3中解決各場(chǎng)景l(fā)oading過度的五種方法,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以學(xué)習(xí)一下2023-11-11
vue單頁應(yīng)用加百度統(tǒng)計(jì)代碼（親測(cè)有效）
這篇文章主要介紹了vue單頁應(yīng)用加百度統(tǒng)計(jì)代碼的解決方法，需要的朋友參考下吧2018-01-01
vue實(shí)現(xiàn)頁面自適應(yīng)的常用4種方法
前端頁面自適應(yīng)有很多方法可以實(shí)現(xiàn),本文小編將為大家詳細(xì)介紹四種常用的方法,并提供相應(yīng)的代碼示例,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
這篇文章主要為大家詳細(xì)介紹了渲染器的工作原理,以及如何將真實(shí)dom或者組件用虛擬dom的形式進(jìn)行描述并渲染,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
本篇文章主要介紹了Vue header組件開發(fā)詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
詳解VUE自定義組件中用.sync修飾符與v-model的區(qū)別
這篇文章主要介紹了詳解VUE自定義組件中用.sync修飾符與v-model的區(qū)別，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06