通用vue組件化展示列表數(shù)據(jù)實例詳解
一、數(shù)據(jù)的簡單展示
1.首先先確定要展示的表格列名以及拿到所需要展示的數(shù)組數(shù)據(jù)
2.然后建立一個專門放el-table遍歷的文件
3.在父組件中將數(shù)據(jù)列表數(shù)據(jù)存放在listData里面，然后傳給子組件，子組件定義一個動態(tài)的列，通過遍歷propList得到列名，然后也動態(tài)匹配prop,這樣prop的值會去和listData進行匹配展示數(shù)據(jù)，這里加了一個默認插槽，由于有時候需要對某列的數(shù)據(jù)進行特殊的操作，這是就需要拿到對應(yīng)的列數(shù)據(jù)，所以這里propItem.slotName就是用來動態(tài)匹配插槽，此外，再將對應(yīng)的行數(shù)據(jù)顯示出來
3.當要對特殊的某一列進行特殊數(shù)據(jù)的處理的時候，可以在引用這個組件對應(yīng)的位置去進行插槽的匹配
例如下列就是對某一列的具體數(shù)據(jù)去進行數(shù)據(jù)的優(yōu)化設(shè)計
4.當想要給表格多加某一列的數(shù)據(jù)時，可以選擇在propItem里面多加一列列名
5. 如果增加的列數(shù)據(jù)能夠自動顯示，可以直接在組件里面加一列el-table-colunm，這里是給表格多加一列序號的，index會自動遞增，這里可以選擇顯示或不顯示，通過父組件給子組件傳遞的showIndexColunm的布爾值去進行判斷顯示
二、自定義操作的列
1.首先在propItem里面多加一列名，然后再在對應(yīng)使用這個組件的文件里面，去寫template動態(tài)匹配具名插槽
三、給表格加個頭部標簽
1.首先先給table加個頭部插槽標簽header，然后可以在頭部插槽里面再定義幾個自定義的插槽，例如下列的headerHandler
2.然后在父組件里面?zhèn)鲗?yīng)的title給子組件，也可以進行自定義headerHandler里面的內(nèi)容
四、進行封裝table
1.首先建立一個content.config.ts的配置文件，里面存儲那些固定的數(shù)據(jù)
2.之后把之前寫的那些插槽和引用table組件的代碼寫在一個公共的文件夾page-content
3.然后再在goods.vue文件里面去引入page-content組件，這樣goods.vue里面的代碼就不會很繁瑣
總結(jié)
到此這篇關(guān)于通用vue組件化展示列表數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue組件化展示列表數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue+node+socket io實現(xiàn)多人互動并發(fā)布上線全流程
這篇文章主要介紹了vue+node+socket io實現(xiàn)多人互動并發(fā)布上線全流程,本文給大家提到了socket.io相關(guān)用法概覽及開發(fā)流程，需要的朋友可以參考下2021-09-09
v-model 是 Vue 內(nèi)置的指令作為屬性接收一個變量（不能是常量）綁定到普通組件和自定義組件中，本文給大家介紹Vue3的v-model示例代碼，感興趣的朋友跟隨小編一起看看吧2023-02-02
這篇文章主要為大家詳細介紹了基于vue2的table分頁組件實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
websocket實現(xiàn)的全雙工通信,真真太香了,下面這篇文章主要給大家介紹了關(guān)于前端之vue3使用WebSocket的詳細步驟,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
iview實現(xiàn)動態(tài)表單和自定義驗證時間段重疊
這篇文章主要介紹了iview實現(xiàn)動態(tài)表單和自定義驗證時間段重疊，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
下面小編就為大家分享一篇vue.js項目打包上線的圖文教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-11-11
Vue.js樣式動態(tài)綁定實現(xiàn)小結(jié)
這篇文章主要介紹了Vue.js樣式動態(tài)綁定實現(xiàn)小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了vue?props?type設(shè)置多個類型，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
今天小編就為大家分享一篇Vue 菜單欄點擊切換單個class(高亮)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
table作為數(shù)據(jù)展示組件,在日常開發(fā)中經(jīng)常被用到,這篇文章主要給大家介紹了關(guān)于vue.js管理后臺table組件封裝的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-08-08