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