el table表頭列 可拖拽排序

"movetableoutside"

>
class
="drag_table"
:data=
"tabledata"
border
stripe
:cell-
class
-name=
"cellclassname"
:header-cell-
class
-name=
"headercellclassname"
style=
"width: 100%"
>
v-for=
"(col, index) in tableheader"
:key=
"index"
:prop=
"col.prop"
:label=
"col.label"
:width=
"col.width"
:min-width=
"col.minwidth"
:type=
"col.type"
:header-align=
"col.headeralign"
:column-key=
"index.tostring()"
:render-header=
"renderheader"
//只有這裡有用，其他和拖拽沒關係
>
"scope"
>
"datatype(scope.row.col.prop)"
>
}<
/template>
v-else
type=
"success"
size=
"normal"
effect=
"dark"
@click=
"handleshow(scope.row.col.prop)"
>立即檢視<
/el-tag>
<
/template>
<
/el-table-column>
>
<
/el-table>
<
/div>

renderheader

(h,)
, mouseup: $event =>
, mousemove: $event =>}}
,[h(
'span',[
h('span',,
on:})
,h('span'
, column.label)])
,h('span',)
])},
// 按下滑鼠開始拖動
handlemousedown
(e, column)`)
// 給當前要拖動列的th設定class
document.
queryselectorall
('.drag_table table thead tr th')[
this
.dragstate.startindex
].classname =
'dragging_column'
// 給拖動時的虛擬容器新增寬高
const table = document.
getelementsbyclassname
('drag_table')[
0]const virtual = document.
getelementsbyclassname
('virtual'
)// 設定每一列的寬度、高度
for(
const item of virtual)
this
.dragstate.movetableoutsideback =
false}}
,// 拖動中
handlemousemove
(e, column)`)
if(currentindex !==
this
.dragstate.startindex)
else
}else}}
,// 滑鼠放開結束拖動
handlemouseup
(e, column)
else`)
if(this
.dragstate.startindex !==
this
.dragstate.endindex)
this
.finishdraginit()
}}},
// 拖動到當前table之外的處理
movetableoutside()
` )if(
this
.dragstate.startindex !==
this
.dragstate.endindex)
this
.finishdraginit()
this
.dragstate.movetableoutsideback =
true}}
,// 拖動易位
dragcolumn()
移動到了$`
)// 判斷是向左移動還是向右移動
if(direction ===
'left'
)else},
// 拖動完成後的初始化
finishdraginit()
},// 動態給表頭單元格新增 class，實現拖動中的虛線效果
headercellclassname()
` :''}
,// 動態給表頭單元格th新增class，實現拖動中的背景
cellclassname()

.tableone,

.tabconstwo 
.erroricon 
.erroricon2 
.erroricon3:
:before 
.erroricon,
.erroricon2,
.erroricon3:hover 
.drag_table th 
.virtual 
.drag_active_left .virtual 
.drag_active_right .virtual 
.thead-cell 
.thead-cell:before 
.dragging_column

el table 固定表頭。

最近在寫vue專案中遇到了需要固定表頭的需求 看了element ui 官方給出的是直接給el table乙個固定高度就可以實現，我就嘗試了一下 height 250 確實能夠達到表頭固定的方法，但是table高度就固定了，想著實現根據網頁高度來設定 獲取 高度 const windowheight...

固定表頭和列

id0ck0 code0 descirption0 tol0 xs0ss0 ms0ds0 bs0xl0 ml0dl0 em0bm0 8888 8888 8822 2222 2222 2222 2222 22111 1111111 this is test 1001 002003 004005 006...

可配置字段型別el table表頭自適應的兩種方案

專案場景 可以選擇展示哪些label的可配置字段型別el table 由於要求做中英雙版，因此表頭自適應這個功能尤為重要 有些英文label實在太長了 已經把專案頁面塗了馬賽克，不知道還會不會被舉報，新人寫部落格這方面不是很懂 霧 理想情況 滿足所有欄位的表頭寬度都能自適應，且如果選擇顯示的字段太少...