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