用drag實現拖動表格列進行列排序
以下是用到的主要方法
1.dragstart 拖動開始返回目標對象
2.dragenter 拖動過程中經過的對象
3.dragend 拖動結束返回目標對象
部分代碼*****************************************************************
html
<table class="el-table el-table--border el-table--small" style="margin-top:20px;">
<thead class="el-table__header-wrapper has-gutter">
<tr>
<th v-for="(columns, index) in tablesColumns" draggable='true' @dragstart="dragstartEvent(index)" @dragenter="dragenterEvent($event,columns)" @dragend="dragendEvent($event,columns)">
<label class="cell" v-html="renderHeader(index, columns)">
</label>
</th>
</tr>
</thead>
<tbody class="el-table__body">
<tr v-for="(item, index) in tables">
<td v-for="columns in tablesColumns">{{item[columns.key]}}</td>
</tr>
</tbody>
</table>
js
data
tables:[{
}],
bill_type:1
bill_type_name:"普通入庫"
id:30
owner_id:1
owner_name:"許旺"
receipt_sn:"2018060282"
status:4
status_name:"完驗"
tablesColumns: [{
column:"單據類型"
key:"bill_type_name"
type:"checkbox"
column:"入庫單號"
key:"receipt_sn"
type:"input"
column:"單據狀態"
key:"status_name"
type:"radio"
dragEndColumn: {},//目標對象最后放置的位置
dragStartIndex: ""//目標對象原索引
//表頭
renderHeader(index, column) {
if ('renderHeader' in this.tablesColumns[index]) {
return this.tablesColumns[index].renderHeader(column, index);
} else {
return column.column || '';
}
},
//拖動開始 ---記錄目標對象的索引，以判斷是向前拖動還是向后拖動
dragstartEvent(index) {
this.dragStartIndex = index
},
//拖動過程---每移動一個對象都會進這個方法，只有最后一次進這個方法的是拖動結束放置的位置
dragenterEvent(ev, col) {
this.dragEndColumn = col
},
//拖動結束 ---刪除原數組中的目標對象，並在放置位置加上目標對象
dragendEvent(ev, col) {
if (col.key != this.dragEndColumn.key) {
this.tablesColumns.forEach((item, index) => {
if (item.key == col.key) {
this.tablesColumns.splice(index, 1)
}
})
this.tablesColumns.forEach((el, index) => {
if (el.key == this.dragEndColumn.key) {
// var data = deepCopy(this.columns[this.dragStartIndex])
var indexCol = ""
if (this.dragStartIndex < index) {
indexCol = index + 1
} else {
indexCol = index
}
this.tablesColumns.splice(indexCol, 0, col)
this.dragEndColumn = {}
this.dragStartIndex = ""
return
}
})
}
}