VUEelement-ui實現復用Table組件

餓了么的table組件功能很強大，對于項目中的各種表格基本夠用，但是……個人對于它以列為單位的操作不習慣 =。=所以改成了另一種方式（我不會告訴你其實本質沒變）。

項目中表格較多，所以復用性最重要

步驟一

先來個基本的表格展示

官例的tableData

table.vue

步驟二

簡化一下表格：

步驟三

復用table.vue就是————給它數據的同時告訴它我的字段名唄

新建一個父組件sl_table.vue

table.vue就更簡單了

步驟四

可以根據需求修改table的形式

列寬度

這個較為簡單，可以直接加個屬性

table.vue

自定義模板列

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

table.vue

表格展開行

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

table.vue

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com