如何实现 vxe-tree 树组件拖拽节点后进行二次确认提示

如何实现 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>

gitee.com/x-extends/v...

相关推荐
usdoc文档预览12 分钟前
USDOC系列之PPT文件在线编辑-VUE前端实现在线浏览器在线编辑PPT文档
前端·vue.js·编辑器·office365·ppt在线编辑·office文件在线编辑·文件在线编辑
Java小卷16 分钟前
面向 schema 编程,轻松搞定 Element 虚拟化表格复杂应用场景
vue.js·低代码·element
仨孩子的爹2 小时前
Lodop、hiprint 与 vue-print-designer:打印控件选型对比
vue.js
ruanno_top5 小时前
四个 canvas 组件,在 2 倍屏上一直是糊的
vue.js
ruanno_top5 小时前
一个脏数据能让整条折线消失:图表组件的四种数据契约
vue.js
FlyWIHTSKY1 天前
vue2和vue3有什么区别,用法上有哪些区别
前端·javascript·vue.js
ruanno_top1 天前
能点,但 Tab 不到:两个组件把「可操作」做了一半
vue.js
爱吃烧烤的技术渣1 天前
别再手写 CRUD 了:我把 Element Plus 的工作量压缩成一份列 schema
前端·vue.js
徐小夕1 天前
万字长文!DeepSeek Super-agent × 企业知识库架构深度拆解与落地实践
前端·vue.js·github
ruanno_top2 天前
倒计时该用 deadline 还是每秒减一?我把两种写法都跑了一遍
vue.js