html表头拖拽,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

}

}

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

最后效果图 ：