換工作，使用ui框架從 ivew換到 element-ui，發現 element-ui的 table沒有 iview方便，需要做一點封裝，記錄一下，暫時做得很簡單，只加上一些必要的屬性，其他屬性有需要再加
1.【table】元件
>
class
="tablegrid"
>
header-row-class-name
="table-list-header"
row-class-name
="table-list-row"
:max-height
="tabledata.maxheight"
:data
="tabledata.data"
@selection-change
="handleselectionchange"
>
v-for
="(item, index) in tabledata.columns"
>
v-if
="item.selection"
type
="selection"
width
="50"
fixed
="left"
align
="center"
:key
="index"
>
el-table-column
>
v-else-if
="item.index"
type
="index"
width
="100"
fixed
="left"
label
="序號"
:index
="item.indexmethod"
:key
="index"
>
el-table-column
>
v-else-if
="item.slot"
show-overflow-tooltip
:name
="item.slot"
:fixed
="item.fixed"
:height
="item.height"
>
slot
>
v-else
show-overflow-tooltip
v-bind
="item"
:min-width
="item.minwidth"
:key
="index"
>
el-table-column
>
template
>
el-table
>
background
layout
="prev, pager, next"
@current-change
="handlecurrentchange"
:current-page.sync
="pagination.currentpage"
:page-size
="pagination.pagesize"
:total
="tabledata.total"
>
el-pagination
>
div>
template
>
export
default
, data:
, total:,}
;},}
,},data()
,};}
, methods:
,// 切換選擇
handleselectionchange
(val),}
,};<
/script>
>
>
ref=
"table"
:table-data
="tabledata"
@getdata
="getlist"
@changeselection
="changetableselection"
>
slot
="action"
align
="center"
label
="操作"
width
="200"
>
slot-scope
="scope"
>
type
="text"
@click
="showdetail(scope.row)"
>
詳情el-button
>
template
>
el-table-column
>
table
>
div>
template
>
export
default,,
},,...,]
, data:
, total:0,
},};
},methods:);
},// 切換選擇
changetableselection
(val)
,// 操作
showdetail
(row),}
,};<
/script>
element ui 實現table整列的拖動
演示位址 1.先動態渲染表頭，給每乙個表頭新增乙個class virtual 的畫虛線的類名，同時給每個表頭加上滑鼠點選 拖動 抬起事件 mousedown mousemove mouseup.2.點選時確定點選的哪個，拖動的時候確定拖動的方向，抬起的時候確定放在的位置。3.改變資料實現拖動完成效果...
基於element ui實現table可配置化
感謝 餓了麼前端團隊提供元件化框架elememt ui，本文基礎元件使用element ui。在開發一些系統過程中，使用table作資料展示在所難免。先來看看el table元件。非常簡單易用的元件，根據提供的data資料，配置table每一列的資料和label。沒錯，這樣似乎都是ok的，但是在開發...
使用elementui的table核取方塊實現反選
其中需要用到elementui的table核取方塊的selection change事件，togglerowselection的table methods方法實現。給勾選中的table行新增乙個陣列屬性為布林值，然後把未勾選中的行數通過es6的filter過濾，放到乙個新的陣列中。反選的時候，把含有...