table表格表头拖拽呼唤位置

<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>