vue3+el-table 实现拖拽交换列顺序及拖拽改变列宽

speck is cheap, show me the code

<template>
  <el-table :data="tableData" border :resizable="true" :stripe="true" style="width: 100%" :key="timeStamp">
     <el-table-column v-for="(item,index) in cols" :key="item.prop" :prop="item.prop" :label="item.label" > 
      <!-- 此为自定义表头 -->
      <template #header>
        <span draggable="true" @drop="dragEnd($event,index)" @dragover="allowDrop($event)" @dragstart="dragstart($event,index)">{{ item.label }}</span>
      </template>
      <!-- 自定义列 -->
      <template #default="scope">
          <span>{{ scope.row[item.prop] }}</span>
      </template>
     </el-table-column>
  </el-table>
</template>

<script setup>
import { ref, reactive } from 'vue'
let dragStartIndex = ref(null)
let dragEndIndex = ref(null)

let timeStamp = ref(0)
let cols = ref([
  {label: 'Date1', prop: 'date'},
  {label: 'Name', prop: 'name'},
  {label: 'Address', prop: 'address'},
  {label: 'Sex', prop: 'sex'}
])  
let tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    sex: 'male',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    sex: 'female',
  }
]

const allowDrop = ($event) =>{
  $event.preventDefault();
}

const dragstart  = ($event,index) => {
  dragStartIndex.value = index
}

const dragEnd = ($event,index) => {
  dragEndIndex.value = index
  timeStamp.value += 1
  if (dragStartIndex !== dragEndIndex) {
    let temp = cols.value[dragStartIndex.value]
    cols.value[dragStartIndex.value] =  cols.value[dragEndIndex.value]
    cols.value[dragEndIndex.value] = temp
  }
}