vue 甘特圖 vxe-gantt table 任務條可拖拽左右調整日期
查看官網:https://gantt.vxeui.com/
gitbub:https://github.com/x-extends/vxe-gantt
gitee:https://gitee.com/x-extends/vxe-gantt
效果

代碼
通過設置 task-bar-config.resize 啓用拖拽任務條調整日期功能
<template>
<div>
<vxe-gantt v-bind="ganttOptions"></vxe-gantt>
</div>
</template>
<script setup>
import { reactive } from 'vue'
const ganttOptions = reactive({
border: true,
height: 500,
taskBarConfig: {
showProgress: true, // 是否顯示進度條
showContent: true, // 是否在任務條顯示內容
move: true, // 是否允許拖拽任務移動日期
resize: true, // 是否允許拖拽任務調整日期
barStyle: {
round: true, // 圓角
bgColor: '#fca60b', // 任務條的背景顏色
completedBgColor: '#65c16f' // 已完成部分任務條的背景顏色
}
},
taskViewConfig: {
tableStyle: {
width: 480 // 表格寬度
}
},
columns: [
{ type: 'seq', width: 70 },
{ field: 'title', title: '任務名稱' },
{ field: 'start', title: '開始時間', width: 100 },
{ field: 'end', title: '結束時間', width: 100 },
{ field: 'progress', title: '進度(%)', width: 80 }
],
data: [
{ id: 10001, title: '任務1', start: '2024-03-01', end: '2024-03-04', progress: 3 },
{ id: 10002, title: '任務2', start: '2024-03-03', end: '2024-03-08', progress: 10 },
{ id: 10003, title: '任務3', start: '2024-03-03', end: '2024-03-11', progress: 90 },
{ id: 10004, title: '任務4', start: '2024-03-05', end: '2024-03-11', progress: 15 },
{ id: 10005, title: '任務5', start: '2024-03-08', end: '2024-03-15', progress: 100 },
{ id: 10006, title: '任務6', start: '2024-03-10', end: '2024-03-21', progress: 5 },
{ id: 10007, title: '任務7', start: '2024-03-15', end: '2024-03-24', progress: 70 },
{ id: 10008, title: '任務8', start: '2024-03-05', end: '2024-03-15', progress: 50 },
{ id: 10009, title: '任務9', start: '2024-03-19', end: '2024-03-20', progress: 5 },
{ id: 10010, title: '任務10', start: '2024-03-12', end: '2024-03-20', progress: 10 },
{ id: 10011, title: '任務11', start: '2024-03-01', end: '2024-03-08', progress: 90 },
{ id: 10012, title: '任務12', start: '2024-03-03', end: '2024-03-06', progress: 60 },
{ id: 10013, title: '任務13', start: '2024-03-02', end: '2024-03-05', progress: 50 },
{ id: 10014, title: '任務14', start: '2024-03-04', end: '2024-03-15', progress: 0 },
{ id: 10015, title: '任務15', start: '2024-03-01', end: '2024-03-05', progress: 30 }
]
})
</script>
https://gitee.com/x-extends/vxe-gantt