使用VUEelement-ui寫個復(fù)用Table組件

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

步驟一

先來個基本的表格展示

官例的tableData

table.vue

步驟二

簡化一下表格：

步驟三

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

新建一個父組件sl_table.vue

table.vue就更簡單了

步驟四

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

列寬度

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

table.vue

自定義模板列

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

table.vue

表格展開行

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

table.vue

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

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