感謝 餓了麼前端團隊提供元件化框架elememt-ui，本文基礎元件使用element-ui。
在開發一些系統過程中，使用table作資料展示在所難免。先來看看el-table元件。
非常簡單易用的元件，根據提供的data資料，配置table每一列的資料和label。沒錯，這樣似乎都是ok的，但是在開發大量包含table的頁面，會發現每次都需要去複製el-table-column，或者你會說你已經很屬性element-ui整套框架的文件。然而，重複的**很多及**量很大。作為一名程式設計師，某一天需要寫自己已經寫過的某段**，是不是感覺有點不應該呢。。。
"tabledata">
"(item,key) in columnsconfig"
:key="key"
:label="item.label"
:prop="item.prop">
data
() , ]
}}
這裡有個小技巧
el-table-column改造下
"tabledata">
"(item,key) in columnsconfig"
:key="key"
v-bind="item">// 這裡改造
"日期"
width="120">
"scope">}
在this.columnconfig.rendercell函式渲染每乙個table cell，如果使用slots會讀取，slots中的內容。 編寫乙個新元件使用vue extends，繼承el-table-columns，重寫了rendercell函式改變其返回內容，這時候用jsx將內容用return slots的函式傳回來。
首先，看看columnsconfig怎麼寫
columnsconfig: [>
)}}, ],
"tabledata">
"item" v-for="(item,key) in columnconfigs" :key="key">
columnsconfig: [>
)}}, ]****
另外，vue-cli使用jsx編寫需要安裝三個外掛程式。
發布了一天沒想到有這麼小夥伴閱讀，有幾點需要補充下。
這是iview，table元件的**
render: (h, params) =>
}, 'view'),
h('button',
}, 'edit')
]);}
那如果想使用filter怎麼辦?
data
() )}}]
}},methods:
}
所以，一直以來前端把js寫在html中，還是把html寫js中，都是爭論不休的話題，如何選擇還開發自己拿捏。
不使用render**是這樣的
"tabledata"
style="width: 100%">
"date"
label="日期"
width="180">
"name"
label="姓名"
width="180">
"address"
label="位址">
使用render處理是這樣的
"tabledata">
"item" v-for="(item,key) in columnconfigs" :key="key">
data
() , , ]}}
【猿2048】www.mk2048.com
jQuery easyui實現關閉全部tabs
有時候當我們開啟很多tabs選項卡時,要關閉它只能乙個乙個的進行關閉,顯然太麻煩,這時可以在選項卡的最右邊新增乙個按鈕 實現關閉全部。function opentab text,url,iconcls else 獲取最後乙個tabs 在新加的選項卡後面新增 關閉全部 var li tabs wrap...
jQuery easyui實現關閉全部tabs
有時候當我們開啟很多tabs選項卡時,要關閉它只能乙個乙個的進行關閉,顯然太麻煩,這時可以在選項卡的最右邊新增乙個按鈕 實現關閉全部。function opentab text,url,iconcls else 獲取最後乙個tabs 在新加的選項卡後面新增 關閉全部 var li tabs wrap...
element ui實現前端分頁
element ui裡的分頁元件 size change handlesizechange current change handlecurrentchange current page page page sizes 20,50,100 background page size limit lay...