当前位置：首页 > news >正文

使用 vxe gantt 实现行拖拽排序

news 2026/5/22 20:44:18

在项目管理或任务调度类应用中，允许用户通过拖拽调整任务的顺序是一项非常实用的交互功能。VXE Gantt 组件提供了简单易用的行拖拽排序支持，只需配置 rowConfig.drag 和列属性 dragSort 即可快速启用。

说明

甘特图全局配置 rowConfig.drag 开启行拖拽功能，允许用户通过鼠标拖动调整行的顺序
指定列的配置中 dragSort 标识该列可作为拖拽排序的“把手”，通常建议将 dragSort: true 设置在第一列或专门的序号/标题列上

rowConfig.drag 控制是否允许拖拽行，而 dragSort 控制哪一列可以触发拖拽。二者必须同时启用，拖拽排序才会生效。

代码

<template><div><vxe-buttonstatus="success"@click="resultEvent">获取排序后的数据</vxe-button><vxe-ganttref="ganttRef"v-bind="ganttOptions"></vxe-gantt></div></template><scriptsetup>import{ref,reactive}from'vue'constganttRef=ref()constganttOptions=reactive({border:true,// 1. 开启行拖拽rowConfig:{drag:true},taskBarConfig:{showProgress:true,showContent:true,barStyle:{round:true,bgColor:'#f56565',completedBgColor:'#65c16f'}},taskViewConfig:{tableStyle:{width:480}},columns:[{type:'seq',width:70},// 序号列，不参与拖拽{field:'title',title:'任务名称',dragSort:true},// 2. 指定拖拽把手列{field:'start',title:'开始时间',width:100},{field:'end',title:'结束时间',width:100}],data:[{id:10001,title:'A项目',start:'2024-03-01',end:'2024-03-04',progress:3},{id:10002,title:'城市道路修理进度',start:'2024-03-03',end:'2024-03-08',progress:10},{id:10003,title:'B大工程',start:'2024-03-03',end:'2024-03-11',progress:90},{id:10004,title:'超级大工程',start:'2024-03-05',end:'2024-03-11',progress:15},{id:10005,title:'地球净化项目',start:'2024-03-08',end:'2024-03-15',progress:100},{id:10006,title:'一个小目标项目',start:'2024-03-10',end:'2024-03-21',progress:5},{id:10007,title:'某某计划',start:'2024-03-15',end:'2024-03-24',progress:70},{id:10008,title:'某某科技项目',start:'2024-03-20',end:'2024-03-29',progress:50},{id:10009,title:'地铁建设工程',start:'2024-03-19',end:'2024-03-20',progress:5},{id:10010,title:'铁路修建计划',start:'2024-03-12',end:'2024-03-20',progress:10}]})constresultEvent=()=>{const$gantt=ganttRef.valueif($gantt){// 获取拖拽排序后的最新数据（包含调整后的行顺序）consttableData=$gantt.getFullData()console.log(tableData)}}</script>