網(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:'收益率'

????????????}]

//拖動開始?--- 拿到當前目標對象的索引

????????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其實就是 索引下標

????????????for(let?i=0;i<this.tablesColumns.length;i++){ // 重新把id 整理一遍

????????????????this.tablesColumns[i].id?=?i

????????????}

????????}

結(jié)束拖動 用數(shù)組對象交換，真的是很容易就寫好了（百度上 查到的 都是 很多判斷什么的，最后拖動還有問題，所以最后作者自己寫了，測試下來很完美。哈哈哈）

最后效果圖 ：