vue table表头拖放拖拽功能

网上找了很多方法，代码看的头疼，最后还是自己写了一套简单的方法。

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 

        },

        //拖动过程 --- 拿到结束后的对象

        dragenterEvent(ev, col) {

            this.dragEndColumn = col

        },

        //拖动结束

        dragendEvent(ev, col) {

            this.tablesColumns.splice(this.dragEndColumn.id,1,...this.tablesColumns.splice(this.dragStartIndex, 1 , this.tablesColumns[this.dragEndColumn.id])) // 这里用到了 数组对象的交换，id其实就是 索引下标

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

                this.tablesColumns[i].id = i

            }

        }

结束拖动 用数组对象交换，真的是很容易就写好了（百度上 查到的 都是 很多判断什么的，最后拖动还有问题，所以最后作者自己写了，测试下来很完美。哈哈哈）

最后效果图 ：