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>