vu3 列表拖动排序

<el-table
            class="flex-table"
            size="medium"
            :border="true"
            tooltip-effect="dark"
            highlight-current-row
            :data="branchTableData"
            id="dragTable"
            row-key="id"
            :header-cell-style="{background: '#F6F6F6', height: '10px'}"
            style="width: 100%;">
            <el-table-column  type="index" label="NO." align="center" width='55px'/>
            <el-table-column prop="customerName" label="所属客户"   />
            <el-table-column prop="branchName" label="网点名称" />
            <el-table-column prop="note" label="备注"/>
            <el-table-column  label="操作" width="130px">
              <template #default="scope">
                <el-popconfirm :title="`确定删除这条记录吗`" width="260px" @confirm="delBranch(scope.row)">
                  <template #reference>
                    <el-button type="danger" title="删除" icon="Minus" size="small" circle plain></el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>

　引用组件　

import Sortable from 'sortablejs'

import { reactive, ref, onMounted,Ref,h, nextTick} from "vue"

   一、弹框调用
     nextTick(() =>{
        setSort()
       })
二、具体方法实现
// 网点列表支持拖拽
function setSort(){
  const el =document.querySelector('#dragTable table tbody')
  new Sortable(el,{
    sort:true,
    ghostClass:'sortable-ghost',
    onEnd:(e) => {
      const targetRow = branchTableData.splice(e.oldIndex,1)[0]
      branchTableData.splice(e.newIndex,0,targetRow)
    }
  })
}