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