vue 甘特图组件 vxe-gantt 实现拖拽任务条移动日期时，实时显示当前日期

在项目管理甘特图中，拖拽调整任务日期是高频交互操作。但用户往往希望在拖拽过程中能实时看到当前对准的日期，以便精确定位。vxe-gantt 提供了 taskBarMoveConfig.showTooltip 配置，开启后即可在拖拽任务条时显示浮动提示框（Tooltip），实时展示当前拖拽位置对应的日期信息。同时，还支持通过 taskBarMoveTooltipConfig.contentMethod 自定义提示内容，满足更丰富的展示需求。

本文将分步讲解如何启用该功能，并提供两种实现方式（默认提示 vs 自定义内容）的完整代码。

配置属性

配置项	说明
taskBarMoveConfig.showTooltip	布尔值，是否在拖拽移动任务时显示 Tooltip 提示框。默认 false。
taskBarMoveTooltipConfig.contentMethod	函数，用于自定义 Tooltip 的显示内容。接收参数 { startDate, endDate, targetStartDate, targetEndDate }，返回字符串或 HTML。

前置条件：必须将 taskBarConfig.moveable 设为 true，否则无法拖拽

只需在 ganttOptions 中配置 taskBarMoveConfig.showTooltip: true，即可在拖拽任务条时显示默认的 Tooltip，内容包括任务当前日期和拖拽后的新日期。

<template>
  <div>
    <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
const ganttOptions = reactive({
  border: true,
  height: 500,
  columnConfig: {
    resizable: true
  },
  taskBarConfig: {
    showProgress: true, // 是否显示进度条
    showContent: true, // 是否在任务条显示内容
    moveable: true, // 是否允许拖拽任务移动日期
    barStyle: {
      round: true, // 圆角
      bgColor: '#fca60b', // 任务条的背景颜色
      completedBgColor: '#65c16f' // 已完成部分任务条的背景颜色
    }
  },
  taskBarMoveConfig: {
    showTooltip: true // 拖拽移动任务实时显示 Tooltip 提示
  },
  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>

默认 Tooltip 仅显示新旧日期，有时我们需要显示更多信息（例如任务名称、工期变化等）。通过 taskBarMoveTooltipConfig.contentMethod 可完全自定义提示内容。

该函数接收四个参数：
- startDate：任务原本的开始日期（Date 对象）
- endDate：任务原本的结束日期（Date 对象）
- targetStartDate：拖拽后新的开始日期（Date 对象）
- targetEndDate：拖拽后新的结束日期（Date 对象）
  函数应返回一个字符串（或 HTML 字符串）作为 Tooltip 的内容。

<template>
  <div>
    <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import XEUtils from 'xe-utils'
const ganttOptions = reactive({
  border: true,
  height: 500,
  columnConfig: {
    resizable: true
  },
  taskBarConfig: {
    showProgress: true, // 是否显示进度条
    showContent: true, // 是否在任务条显示内容
    moveable: true, // 是否允许拖拽任务移动日期
    barStyle: {
      round: true, // 圆角
      bgColor: '#fca60b', // 任务条的背景颜色
      completedBgColor: '#65c16f' // 已完成部分任务条的背景颜色
    }
  },
  taskBarMoveConfig: {
    showTooltip: true // 拖拽移动任务实时显示 Tooltip 提示
  },
  taskBarMoveTooltipConfig: {
    // 自定义提示内容
    contentMethod({ startDate, endDate, targetStartDate, targetEndDate }) {
      return `原始日期：${XEUtils.toDateString(startDate, 'yyyy-MM-dd')}~${XEUtils.toDateString(endDate, 'yyyy-MM-dd')}\n新的开始日期：${XEUtils.toDateString(targetStartDate, 'yyyy-MM-dd')}~${XEUtils.toDateString(targetEndDate, 'yyyy-MM-dd')}`
    }
  },
  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>

关键点

必须启用 moveable
- 若 taskBarConfig.moveable 为 false，则无法拖拽，Tooltip 也不会显示。
日期格式化
- 在自定义 contentMethod 中，建议使用 XEUtils.toDateString 或原生 Intl.DateTimeFormat 对日期进行格式化，以免显示为默认的 Date.toString() 格式。
多行内容
- Tooltip 内容支持多行（通过换行符 \n 或 HTML 标签），可以根据需要展示更丰富的信息。
性能考虑
该 Tooltip 在拖拽过程中会频繁刷新，内容中避免执行复杂计算，以免影响拖拽流畅性。

vxe-gantt 的 taskBarMoveConfig.showTooltip 为拖拽任务条提供了即时日期反馈，让用户操作更精准、更高效。通过默认 Tooltip 可快速上手，而 taskBarMoveTooltipConfig.contentMethod 则允许开发者根据业务需求定制提示内容，打造更人性化的交互体验。
该功能与拖拽调整日期、进度编辑等协同工作，是甘特图应用中不可或缺的细节优化。

https://gantt.vxeui.com

posted @ 2026-09-08 18:17 你个老六阅读(3) 评论(0) 收藏举报

刷新页面返回顶部

zhiy3

vue 甘特图组件 vxe-gantt 实现拖拽任务条移动日期时，实时显示当前日期

配置属性

基础用法：启用默认 Tooltip

进阶用法：自定义 Tooltip 内容

关键点

公告