尧图网站建设 尧图网络
  • 首页
  • 关于我们
  • 服务项目
  • 案例展示
  • 建站流程
  • 资讯中心
  • 联系我们
首页/资讯中心/详情

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

如何实现 vxe-tree 树组件拖拽节点后进行二次确认提示
📅 发布时间:2026/6/21 5:49:30

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

官网:https://vxeui.com
github:https://github.com/x-extends/vxe-pc-ui
gitee:https://gitee.com/x-extends/vxe-pc-ui

tree_drag_drag_method

需要提示操作时,通过 drag-config.dragEndMethod 可以自定义处理拖拽结束时的拖动

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

https://gitee.com/x-extends/vxe-pc-ui

相关新闻

  • SecureCRT SecureFX 9.7 for macOS, Linux, Windows - 跨平台的多协议终端仿真和文件传输
  • PostgreSQL 19:超高速聚合的全新突破
  • pycharm2025.3 12月最新 安装、授权、使用说明

最新新闻

  • AI决策优化:在容量约束与噪声依从下如何科学设定干预阈值
  • 鲁棒最优实验设计:应对传感器失效的工程实践与算法实现
  • 嵌入式系统硬件开关配置详解:以QorIQ T1023启动与IFC接口为例
  • 第6章:Python接入Ollama——构建第一个AI小助手
  • 魔兽争霸3终极优化指南:三步免费解决宽屏适配、地图加载与帧率问题
  • ASC、GSC+与Δ-替代:从需求类型出发,系统化设计集合函数类的思维框架

日新闻

  • Visual C++运行库修复终极指南:5分钟快速解决Windows软件启动错误
  • 手把手教你构建统计局地区经济数据爬虫:从环境搭建到数据持久化全指南
  • 2026多Agent深度解析:用AI团队替代单一模型,四种架构实战落地

周新闻

  • Visual C++运行库修复终极指南:5分钟快速解决Windows软件启动错误
  • 手把手教你构建统计局地区经济数据爬虫:从环境搭建到数据持久化全指南
  • 2026多Agent深度解析:用AI团队替代单一模型,四种架构实战落地

月新闻

  • 【总结】入门篇:50句话让你记住架构核心概念
  • WeChatMsg技术方案解析:实现Mac微信数据自主管理的完整解决方案
  • WeChatMsg:革新性微信数据备份方案,打造你的专属数字记忆库

关于尧图

  • 公司简介
  • 团队介绍
  • 企业文化
  • 荣誉资质

服务项目

  • 定制开发
  • 电商建站
  • UI 设计
  • 运维服务

快速链接

  • 案例展示
  • 建站流程
  • 常见问题
  • 资讯中心

联系方式

  • 📍北京市朝阳区互联网产业园 A 座 10 层
  • 📞400-888-8888
  • ✉️contact@rkmt.cn
  • 🕐周一至周日 9:00-21:00

© 2024 北京尧图网络科技有限公司 版权所有 | 京 ICP 备 XXXXXXXX 号