如何实现 vxe-tree 树组件拖拽节点后进行二次确认提示,参数 drag-config.dragStartMethod 可以自定义处理拖拽开始时的拖动,可以自定义是否允许拖拽
官网:vxeui.com github:github.com/x-extends/v... gitee:gitee.com/x-extends/v...

需要提示操作时,通过 drag-config.dragEndMethod 可以自定义处理拖拽结束时的拖动
html
<template>
<div>
<vxe-tree v-bind="treeOptions"></vxe-tree>
</div>
</template>
<script setup>
import { reactive } from 'vue'
import { VxeUI } from 'vxe-pc-ui'
const treeOptions = reactive({
transform: true,
drag: true,
dragConfig: {
isCrossDrag: true,
isSelfToChildDrag: true,
showGuidesStatus: true,
async dragEndMethod () {
const type = await VxeUI.modal.confirm({
content: '请是否确认调整顺序?'
})
if (type === 'confirm') {
return true
}
VxeUI.modal.message({
content: '操作已取消',
status: 'warning'
})
return false
}
},
data: [
{ title: '节点2', id: '2', parentId: null },
{ title: '节点3', id: '3', parentId: null },
{ title: '节点3-1', id: '31', parentId: '3' },
{ title: '节点3-2', id: '32', parentId: '3' },
{ title: '节点3-2-1', id: '321', parentId: '32' },
{ title: '节点3-2-2', id: '322', parentId: '32' },
{ title: '节点3-3', id: '33', parentId: '3' },
{ title: '节点3-3-1', id: '331', parentId: '33' },
{ title: '节点3-3-2', id: '332', parentId: '33' },
{ title: '节点3-3-3', id: '333', parentId: '33' },
{ title: '节点3-4', id: '34', parentId: '3' },
{ title: '节点4', id: '4', parentId: null },
{ title: '节点4-1', id: '41', parentId: '4' },
{ title: '节点4-1-1', id: '411', parentId: '42' },
{ title: '节点4-1-2', id: '412', parentId: '42' },
{ title: '节点4-2', id: '42', parentId: '4' },
{ title: '节点4-3', id: '43', parentId: '4' },
{ title: '节点4-3-1', id: '431', parentId: '43' },
{ title: '节点4-3-2', id: '432', parentId: '43' },
{ title: '节点5', id: '5', parentId: null }
]
})
</script>