vue 甘特图组件 vxe-gantt 配置拖拽调整任务起止日期时实时显示 Tooltip 提示

在甘特图编排中，用户不仅需要拖拽移动整个任务条，也经常需要拖拽任务条左右边缘来单独调整开始日期或结束日期（即 Resize 操作）。为了帮助用户在拖拽过程中精确定位日期，vxe-gantt 提供了 taskBarResizeConfig.showTooltip 配置，开启后会在拖拽调整边缘时实时显示当前对准的日期信息。同时，支持通过 taskBarResizeTooltipConfig.contentMethod 自定义提示内容，满足更细化的展示需求。

本文将独立讲解 resize（边缘拖拽调整）场景下的日期实时提示配置，与"移动整个任务条"（move）区分开，提供完整代码示例。

配置说明

配置项	说明
taskBarResizeConfig.showTooltip	布尔值，是否在拖拽调整任务条边缘（开始或结束日期）时显示 Tooltip 提示框。默认 false。
taskBarResizeTooltipConfig.contentMethod	函数，用于自定义 Tooltip 内容。接收参数 { resizeType, startDate, endDate, targetStartDate, targetEndDate }，返回字符串或 HTML。

前置条件：必须将 taskBarConfig.resizable 设为 true，否则无法拖拽调整边缘。

只需在 ganttOptions 中设置 taskBarResizeConfig.showTooltip: true，即可在拖拽任务条左边缘（调整开始日期）或右边缘（调整结束日期）时，显示默认的 Tooltip，内容为原始日期与新的日期。

html 复制代码

<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, // 是否在任务条显示内容
    resizable: true, // 是否允许拖拽任务调整日期
    barStyle: {
      round: true, // 圆角
      bgColor: '#fca60b', // 任务条的背景颜色
      completedBgColor: '#65c16f' // 已完成部分任务条的背景颜色
    }
  },
  taskBarResizeConfig: {
    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-02-26', end: '2024-03-01', 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 仅显示新旧日期，如需显示更多信息（如调整类型、工期变化等），可以通过 taskBarResizeTooltipConfig.contentMethod 自定义。

该函数接收以下参数：
- resizeType：字符串，'start' 表示正在调整开始日期，'end' 表示正在调整结束日期。
- startDate：任务原本的开始日期（Date 对象）
- endDate：任务原本的结束日期（Date 对象）
- targetStartDate：调整后新的开始日期（Date 对象）
- targetEndDate：调整后新的结束日期（Date 对象）

根据 resizeType 可以区分展示不同的提示信息。

html 复制代码

<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, // 是否在任务条显示内容
    resizable: true, // 是否允许拖拽任务调整日期
    barStyle: {
      round: true, // 圆角
      bgColor: '#fca60b', // 任务条的背景颜色
      completedBgColor: '#65c16f' // 已完成部分任务条的背景颜色
    }
  },
  taskBarResizeConfig: {
    showTooltip: true // 拖拽调整任务实时显示 Tooltip 提示
  },
  taskBarResizeTooltipConfig: {
    // 自定义提示内容
    contentMethod({ resizeType, startDate, endDate, targetStartDate, targetEndDate }) {
      if (resizeType === 'start') {
        return `开始日期：${XEUtils.toDateString(startDate, 'yyyy-MM-dd')}\n新的开始日期：${XEUtils.toDateString(targetStartDate, 'yyyy-MM-dd')}`
      }
      return `结束日期：${XEUtils.toDateString(endDate, 'yyyy-MM-dd')}\n新的结束日期：${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-02-26', end: '2024-03-01', 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>

关键点

必须启用 resizable
- 若 taskBarConfig.resizable 为 false，则无法拖拽边缘，Tooltip 不会显示。
与 moveable 的区别
- moveable：拖拽任务条中间区域，整体移动任务（开始和结束日期同时平移）。
- resizable：拖拽任务条左右边缘，仅调整开始或结束日期（工期变化）。
- 两者可同时开启，互不干扰。
日期格式化
- 在 contentMethod 中，建议使用 XEUtils.toDateString 或原生方法格式化日期，避免显示冗长的默认字符串。
多行内容
- 提示内容支持换行（\n），可根据需要展示多行信息。

vxe-gantt 的 taskBarResizeConfig.showTooltip 为拖拽调整任务边缘提供了实时日期反馈，帮助用户精确控制开始和结束日期。通过默认 Tooltip 可快速上手，而 taskBarResizeTooltipConfig.contentMethod 则允许根据调整类型（开始/结束）定制不同的提示内容，让交互更贴合业务场景。

该功能与拖拽移动（move）相互独立，共同构成了完整、直观的任务条交互体系。

https://gantt.vxeui.com

vue 甘特图组件 vxe-gantt 配置拖拽调整任务起止日期时实时显示 Tooltip 提示

配置说明

基础用法：启用默认 Tooltip

进阶用法：自定义 Tooltip 内容

关键点