一、數(shù)據(jù)的簡(jiǎn)單展示

1.首先先確定要展示的表格列名以及拿到所需要展示的數(shù)組數(shù)據(jù)

2.然后建立一個(gè)專門放el-table遍歷的文件

3.在父組件中將數(shù)據(jù)列表數(shù)據(jù)存放在listData里面，然后傳給子組件，子組件定義一個(gè)動(dòng)態(tài)的列，通過(guò)遍歷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就是用來(lái)動(dòng)態(tài)匹配插槽，此外，再將對(duì)應(yīng)的行數(shù)據(jù)顯示出來(lái)

 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)遞增，這里可以選擇顯示或不顯示，通過(guò)父組件給子組件傳遞的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)文章希望大家以后多多支持腳本之家！

最新評(píng)論