vue 甘特图组件，实现将任务标记任务为删除状态

在项目管理和甘特图应用中，删除任务是一个常见操作。但直接硬删除（从数据源移除）往往丢失历史记录，且不可逆。软删除（标记为删除状态，但数据保留）更符合业务需求——用户可以标记任务待删除，最终确认后再统一提交后端处理。
vxe-gantt 提供了内置的 CRUD 管理器，通过 setPendingRow 方法标记任务为“待删除”状态，并通过 getPendingRecords 获取所有已标记的行，方便开发者统一处理。本文将详细介绍该功能的配置与用法。

核心 API 说明

方法参数说明
setPendingRow(row, status) row: 行对象
status: true（标记）或 false（取消标记）将指定行标记为待删除状态（或取消标记）。标记后，行会显示特殊的视觉样式（如删除线或灰色背景）。
getPendingRecords() 无返回当前所有被标记为待删除的行数据数组（仅返回原始数据，不包含组件内部状态）。
clearPendingRows() 无清除所有待删除标记（通常用于提交后重置）。

需在 vxe-gantt 配置中启用 keepSource: true，以保留数据源的可追踪性，确保 CRUD 管理器正常工作。

完整实现步骤

基础配置

在 ganttOptions 中开启 keepSource，并配置可编辑列和操作列。

const ganttOptions = reactive({
  border: true,
  keepSource: true,   // 必须开启
  // ... 其他配置
})

添加操作列

通过插槽在每一行提供“标记”和“取消”按钮

<template #action="{ row }">
  <vxe-button mode="text" status="error" @click="pendingRow(row, true)">标记</vxe-button>
  <vxe-button mode="text" @click="pendingRow(row, false)">取消</vxe-button>
</template>

实现标记/取消方法

通过 ref 获取甘特图实例，调用 setPendingRow

const ganttRef = ref()

const pendingRow = (row, status) => {
  const $gantt = ganttRef.value
  if ($gantt) {
    $gantt.setPendingRow(row, status)   // status: true=标记删除, false=取消标记
  }
}

获取已标记数据

提交前，调用 getPendingRecords 获取所有待删除记录，发送给后端：

const getPendingEvent = () => {
  const $gantt = ganttRef.value
  if ($gantt) {
    const pendingRecords = $gantt.getPendingRecords()
    // 展示或提交 pendingRecords
    VxeUI.modal.alert(`标记：${pendingRecords.length} 行`)
  }
}

代码

<template>
  <div>
    <vxe-button status="success" @click="getPendingEvent">获取已标记数据</vxe-button>
    <vxe-gantt ref="ganttRef" v-bind="ganttOptions">
      <template #action="{ row }">
        <vxe-button mode="text" status="error" @click="pendingRow(row, true)">标记</vxe-button>
        <vxe-button mode="text" @click="pendingRow(row, false)">取消</vxe-button>
      </template>
    </vxe-gantt>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { VxeUI } from 'vxe-gantt'

const ganttRef = ref()

const ganttOptions = reactive({
  border: true,
  showOverflow: true,
  keepSource: true,
  height: 500,
  taskBarConfig: {
    showProgress: true, // 是否显示进度条
    showContent: true, // 是否在任务条显示内容
    moveable: true, // 是否允许拖拽任务移动日期
    barStyle: {
      round: true, // 圆角
      bgColor: '#fca60b', // 任务条的背景颜色
      completedBgColor: '#65c16f' // 已完成部分任务条的背景颜色
    }
  },
  taskViewConfig: {
    tableStyle: {
      width: 480 // 表格宽度
    }
  },
  editConfig: {
    trigger: 'dblclick',
    mode: 'cell',
    showStatus: true
  },
  keyboardConfig: {
    isEdit: true, // 是否开启任意键进入编辑（功能键除外）
    isDel: true, // 是否开启删除键功能
    isEsc: true // 是否开启Esc键关闭编辑功能
  },
  columns: [
    { type: 'seq', width: 70 },
    { field: 'title', title: '任务名称', minWidth: 160, editRender: { name: 'VxeInput' } },
    { field: 'start', title: '开始时间', width: 120, editRender: { name: 'VxeDatePicker' } },
    { field: 'end', title: '结束时间', width: 120, editRender: { name: 'VxeDatePicker' } },
    { field: 'progress', title: '进度(%)', width: 140, editRender: { name: 'VxeNumberInput' } },
    { field: 'action', title: '操作', fixed: 'right', width: 140, slots: { default: 'action' } }
  ],
  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 }
  ]
})

const pendingRow = async (row, status) => {
  const $gantt = ganttRef.value
  if ($gantt) {
    $gantt.setPendingRow(row, status)
  }
}

const getPendingEvent = () => {
  const $gantt = ganttRef.value
  if ($gantt) {
    const pendingRecords = $gantt.getPendingRecords()
    VxeUI.modal.alert(`标记：${pendingRecords.length} 行`)
  }
}
</script>

适用场景

批量删除确认
- 用户先标记多条任务，再统一点击“提交删除”按钮，调用 getPendingRecords 获取列表并发送到后端，实现批量软删除。
撤销操作
- 标记后若用户取消，可通过 setPendingRow(row, false) 撤销，无需重新加载数据。
提交后清理
- 提交成功后可调用 clearPendingRows() 清空标记状态，避免重复提交。
数据联动
- 标记状态不会影响甘特图的渲染和任务条拖拽，用户仍可正常编辑其他字段。

关键点

keepSource 必须为 true，否则 getPendingRecords 无法正常工作。
标记状态只存在于前端，刷新页面后会丢失。如需持久化，需在提交时保存到后端，并在加载时恢复（可配合 setPendingRow 重新标记）。

vxe-gantt 的 setPendingRow 和 getPendingRecords 提供了一套简洁的软删除管理方案，让甘特图能够轻松支持“标记-确认-提交”的删除流程。无需额外状态管理，即可实现前端 CRUD 操作的完整闭环。
该功能特别适用于需要审批或二次确认的场景，既保证了数据安全，又提升了用户体验。

https://gantt.vxeui.com

posted @ 2026-09-04 16:40 独行者r2 阅读(14) 评论(0) 收藏举报

刷新页面返回顶部

leid6