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

vxe-table 如何实现拖拽行数据排序,并对拖拽后进行提示框二次确认是否允许拖拽

vxe-table 如何实现拖拽行数据排序,并对拖拽后进行提示框二次确认是否允许拖拽
📅 发布时间:2026/6/19 3:09:15

vxe-table 如何实现拖拽行数据排序,并对拖拽后进行提示框二次确认是否允许拖拽,通过 row-drag-config.dragStartMethod 可以自定义处理拖拽开始时的拖动

查看官网:https://vxetable.cn
gitbub:https://github.com/x-extends/vxe-table
gitee:https://gitee.com/x-extends/vxe-table

效果

Video_2025-11-14_143549-ezgif.com-video-to-gif-converter (1)

代码

通过 row-config.drag 和列设置 drag-sort 启用行拖拽排序功能,并
通过 row-drag-config.dragEndMethod 可以自定义处理拖拽结束时的拖动

<template><div><vxe-grid v-bind="gridOptions"></vxe-grid></div>
</template><script setup>
import { reactive } from 'vue'
import { VxeUI } from 'vxe-pc-ui'const gridOptions = reactive({border: true,rowConfig: {drag: true},rowDragConfig: {async dragEndMethod () {const type = await VxeUI.modal.confirm({content: '请是否确认调整顺序?'})if (type === 'confirm') {return true} else {VxeUI.modal.message({content: '操作已取消',status: 'warning'})}return false}},columns: [{ field: 'name', title: 'Name' },{ field: 'role', title: 'Role', dragSort: true },{ field: 'sex', title: 'Sex' },{ field: 'age', title: 'Age' },{ field: 'address', title: 'Address' }],data: [{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }]
})
</script>

https://gitee.com/x-extends/vxe-table

相关新闻

  • SOLID原则在React中的应用实践
  • 绘图工具
  • 2025 年 11 月离心机厂家推荐排行榜,台式低速大容量离心机,血液离心机,台式低速离心机,台式指针式离心机,台式离心机,小高速离心机,低速微电脑控制离心机,六乘五十毫升离心机,高速离心机公司推荐

最新新闻

  • 深入解析T1023RDB开发板:从Power Architecture核心到高速接口的硬件设计实战
  • 如何实现Windows内核级硬件伪装:EASY-HWID-SPOOFER完整指南
  • 每日算法快闪赛:提升你的编程实力
  • Mac百度网盘下载加速终极方案:三分钟实现SVIP级下载体验
  • 分布式黎曼优化算法在非欧数据中的应用与实现
  • 音乐歌词管理的新范式:163MusicLyrics如何重塑你的音乐体验

日新闻

  • 5分钟掌握Python进化算法:Geatpy高性能优化工具完全指南
  • Microchip 24AA044 EEPROM选型与应用全指南:从参数解析到实战编程
  • 华为的鸿蒙到底有多牛?为什么称作遥遥领先?

周新闻

  • 3步解锁iOS设备:applera1n激活锁绕过完全指南
  • 39 2026 人工智能证书终极盘点,普通人选 AI 证书可以从这些方向入手
  • Redis 暴露公网有多危险?从端口检查到补救步骤

月新闻

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

关于尧图

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

服务项目

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

快速链接

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

联系方式

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

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