網(wǎng)上找了很多方法川尖，代碼看的頭疼，最后還是自己寫了一套簡單的方法赡鲜。
HTML：
<table>
????????????????<thead?class="el-table__header-wrapper?has-gutter">
????????????????????<tr>
????????????????????????<th v-for="(columns,?index)?in?tablesColumns"?:key="index"?draggable='true'?@dragstart="dragstartEvent(index)"?@dragenter="dragenterEvent($event,columns)"?@dragend="dragendEvent($event,columns)">
????????????????????????????<label?class="cell">{{columns.name}}</label>
????????????????????????</th>
????????????????????</tr>
????????????????</thead>
????????????????<tbody?class="el-table__body">
????????????????????<tr>
????????????????????????<td></td>
????????????????????</tr>
????????????????</tbody>
????????????</table>
JS：
tablesColumns:[{
????????????????id:0,
????????????????name:'債券代碼'
????????????},{
????????????????id:1,
????????????????name:'買賣方向'
????????????},{
????????????????id:2,
????????????????name:'量(萬元)'
????????????},{
????????????????id:3,
????????????????name:'收益率'
????????????}]
//拖動開始?--- 拿到當(dāng)前目標(biāo)對象的索引
????????dragstartEvent(index)?{
????????????this.dragStartIndex?=?index?
????????},
????????//拖動過程 --- 拿到結(jié)束后的對象
????????dragenterEvent(ev,?col)?{
????????????this.dragEndColumn?=?col
????????},
????????//拖動結(jié)束
????????dragendEvent(ev,?col)?{
????????????this.tablesColumns.splice(this.dragEndColumn.id,1,...this.tablesColumns.splice(this.dragStartIndex,?1?,?this.tablesColumns[this.dragEndColumn.id])) // 這里用到了 數(shù)組對象的交換空厌，id其實就是 索引下標(biāo)
????????????for(let?i=0;i<this.tablesColumns.length;i++){ // 重新把id 整理一遍
????????????????this.tablesColumns[i].id?=?i
????????????}
????????}
結(jié)束拖動 用數(shù)組對象交換，真的是很容易就寫好了（百度上 查到的 都是 很多判斷什么的银酬，最后拖動還有問題嘲更，所以最后作者自己寫了，測試下來很完美揩瞪。哈哈哈）
最后效果圖 ：
