<template> <div class=""> <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 /> </tr> </tbody> </table> </div> </template> <script> export default { data() { return { tablesColumns: [{ id: 0, name: '债券代码' }, { id: 1, name: '买卖方向' }, { id: 2, name: '量(万元)' }, { id: 3, name: '收益率' }] } }, created() {}, methods: { // 拖动开始--- 拿到当前目标对象的索引 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 } } } } </script> <style scoped lang='less'> </style>
标签:dragEndColumn,name,拖动,tablesColumns,表头,id,col,table,拖拽 From: https://www.cnblogs.com/hwy6/p/17061771.html