使用VUEelement-ui寫個復用Table組件
來源：懂視網
責編：小采
時間：2020-11-27 20:10:02
使用VUEelement-ui寫個復用Table組件
使用VUEelement-ui寫個復用Table組件:餓了么的table組件功能很強大，對于項目中的各種表格基本夠用，但是……個人對于它以列為單位的操作不習慣 。所以改成了另一種方式。本文主要介紹了VUE element-ui 寫個復用Table組件的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能幫
導讀使用VUEelement-ui寫個復用Table組件:餓了么的table組件功能很強大，對于項目中的各種表格基本夠用，但是……個人對于它以列為單位的操作不習慣 。所以改成了另一種方式。本文主要介紹了VUE element-ui 寫個復用Table組件的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能幫
餓了么的table組件功能很強大，對于項目中的各種表格基本夠用，但是……個人對于它以列為單位的操作不習慣 。所以改成了另一種方式。本文主要介紹了VUE element-ui 寫個復用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
使用VUEelement-ui寫個復用Table組件
使用VUEelement-ui寫個復用Table組件:餓了么的table組件功能很強大，對于項目中的各種表格基本夠用，但是……個人對于它以列為單位的操作不習慣 。所以改成了另一種方式。本文主要介紹了VUE element-ui 寫個復用Table組件的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能幫
