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

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

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

3.在父組件中將數(shù)據(jù)列表數(shù)據(jù)存放在listData里面，然后傳給子組件，子組件定義一個動態(tài)的列，通過遍歷propList得到列名，然后也動態(tài)匹配prop,這樣prop的值會去和listData進(jìn)行匹配展示數(shù)據(jù)，這里加了一個默認(rèn)插槽，由于有時候需要對某列的數(shù)據(jù)進(jìn)行特殊的操作，這是就需要拿到對應(yīng)的列數(shù)據(jù)，所以這里propItem.slotName就是用來動態(tài)匹配插槽，此外，再將對應(yīng)的行數(shù)據(jù)顯示出來

 3.當(dāng)要對特殊的某一列進(jìn)行特殊數(shù)據(jù)的處理的時候，可以在引用這個組件對應(yīng)的位置去進(jìn)行插槽的匹配

例如下列就是對某一列的具體數(shù)據(jù)去進(jìn)行數(shù)據(jù)的優(yōu)化設(shè)計

 4.當(dāng)想要給表格多加某一列的數(shù)據(jù)時，可以選擇在propItem里面多加一列列名

5. 如果增加的列數(shù)據(jù)能夠自動顯示，可以直接在組件里面加一列el-table-colunm，這里是給表格多加一列序號的，index會自動遞增，這里可以選擇顯示或不顯示，通過父組件給子組件傳遞的showIndexColunm的布爾值去進(jìn)行判斷顯示

二、自定義操作的列

1.首先在propItem里面多加一列名，然后再在對應(yīng)使用這個組件的文件里面，去寫template動態(tài)匹配具名插槽

三、給表格加個頭部標(biāo)簽

1.首先先給table加個頭部插槽標(biāo)簽header，然后可以在頭部插槽里面再定義幾個自定義的插槽，例如下列的headerHandler 

 2.然后在父組件里面?zhèn)鲗?yīng)的title給子組件，也可以進(jìn)行自定義headerHandler里面的內(nèi)容

四、進(jìn)行封裝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)文章希望大家以后多多支持腳本之家！

最新評論