VUEelement-ui實(shí)現(xiàn)復(fù)用Table組件

餓了么的table組件功能很強(qiáng)大，對(duì)于項(xiàng)目中的各種表格基本夠用，但是……個(gè)人對(duì)于它以列為單位的操作不習(xí)慣 =。=所以改成了另一種方式（我不會(huì)告訴你其實(shí)本質(zhì)沒變）。

項(xiàng)目中表格較多，所以復(fù)用性最重要

步驟一

先來個(gè)基本的表格展示

官例的tableData

table.vue

步驟二

簡化一下表格：

步驟三

復(fù)用table.vue就是————給它數(shù)據(jù)的同時(shí)告訴它我的字段名唄

新建一個(gè)父組件sl_table.vue

table.vue就更簡單了

步驟四

可以根據(jù)需求修改table的形式

列寬度

這個(gè)較為簡單，可以直接加個(gè)屬性

table.vue

自定義模板列

如果我們需要告訴組件哪個(gè)是自定義的列，所以添加一個(gè)屬性operate

table.vue

表格展開行

類似寬度，只要sl_table.vue傳入一個(gè)isExpand的屬性。這里加個(gè)每次只能展開一行的效果：

table.vue

其他的（排序、多選）操作也是類似添加。。多不贅述。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com