vue table表头拖放拖拽功能

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

HTML：

                

                    

                        

                    

                

                

                    

                        

                    

                

            

{{columns.name}}

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[i].id = i

            }

        }

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

最后效果图 ：