vue中 this.$nextTick(() => { this.$refs.table.init()}) 的含义

<think>问题：列表与甘特图标题行不一致 原因：在左侧列表和右侧甘特图同时显示时，由于表格的标题行（thead）和甘特图的标题行（gantt的grid部分）是独立渲染的，当左侧表格滚动时，右侧甘特图的标题行不会同步滚动，导致视觉上不一致。 解决方案： 1. 同步滚动：监听左侧表格的滚动事件，然后同步设置右侧甘特图的滚动位置（水平滚动和垂直滚动）。 2. 调整甘特图结构：甘特图通常由两部分组成（左侧网格和右侧时间线），我们需要分别控制这两部分的滚动。 具体步骤： a. 在甘特图初始化后，获取甘特图的网格（grid）和时间线（chart）的DOM元素。 b. 监听左侧表格（el-table）的滚动事件（包括垂直滚动和水平滚动）。 c. 当左侧表格滚动时，同步设置甘特图网格部分（grid）的垂直滚动位置，以及时间线部分（chart）的水平滚动位置。 注意：由于甘特图网格和时间线是分开的，我们需要分别设置它们的滚动位置。 代码修改如下： 1. 在initGantt方法中，初始化后获取甘特图的两个滚动容器，并存储起来。 2. 在表格上添加滚动事件监听。 3. 在滚动事件处理函数中，将表格的滚动位置同步到甘特图。 同时，我们也要注意，当甘特图滚动时，我们也可以反向同步到表格？但是根据需求，通常我们只需要表格滚动时甘特图同步即可。 另外，由于表格和甘特图的结构差异，垂直滚动只能同步网格部分（因为时间线部分没有垂直滚动条），水平滚动只能同步时间线部分（因为网格部分没有水平滚动条，而时间线部分有水平滚动条）。 修改后的initGantt方法：</think># 列表与甘特图标题行不一致问题解决方案 问题分析：当表格和甘特图同时显示时，它们的标题行高度不一致，导致视觉上不协调。主要原因是表格标题行高度与甘特图标题行高度不匹配。 ## 修复方案 ### 1. 调整表格行高和甘特图配置 ```javascript // 在 initGantt 方法中调整甘特图行高 initGantt() { // ... 其他配置保持不变 ... // 调整行高与表格一致 gantt.config.row_height = 30; // 与表格行高一致 gantt.config.scale_height = 30; // 调整时间刻度高度 gantt.config.grid_width = 500; // ... 其他初始化代码 ... } ``` ### 2. 添加同步滚动功能 ```javascript // 在 initGantt 方法中添加滚动同步 initGantt() { // ... 其他初始化代码 ... // 获取甘特图DOM元素 const ganttGrid = document.querySelector('.gantt_grid'); const ganttDataArea = document.querySelector('.gantt_data_area'); // 监听表格滚动事件 const tableBody = this.$refs.table.$el.querySelector('.el-table__body-wrapper'); if (tableBody) { tableBody.addEventListener('scroll', () => { // 同步垂直滚动 ganttDataArea.scrollTop = tableBody.scrollTop; // 同步水平滚动 const tableHeader = this.$refs.table.$el.querySelector('.el-table__header-wrapper'); if (tableHeader) { ganttGrid.scrollLeft = tableHeader.scrollLeft; } }); } // ... 其他代码 ... } ``` ### 3. 添加CSS样式确保标题行高度一致 ```css /* 添加在 <style scoped> 部分 */ /* 表格标题行样式 */ :deep(.el-table__header) th { height: 30px; padding: 0; } /* 甘特图标题行样式 */ :deep(.gantt_grid_head_cell) { height: 30px; line-height: 30px; padding: 0 5px; } /* 甘特图时间刻度样式 */ :deep(.gantt_scale_cell) { height: 30px; line-height: 30px; } /* 确保表格和甘特图容器高度一致 */ .table-container, .gantt-container { height: calc(100vh - 180px); overflow: auto; } ``` ### 4. 完整修复后的代码 ```vue <script> // ... 其他代码保持不变 ... // 修改 initGantt 方法 initGantt() { if (!this.$refs.ganttContainer) return; try { // 清除之前的实例 if (gantt.$container) { gantt.destructor(); } gantt.config.date_format = '%Y-%m-%d'; gantt.config.scale_unit = 'month'; gantt.config.step = 1; gantt.config.subscales = [ { unit: 'day', step: 1, date: '%j, %D' } ]; gantt.config.columns = [ { name: 'text', label: '任务名称', tree: true, width: 200 }, { name: 'start_date', label: '开始时间', align: 'center', width: 100 }, { name: 'end_date', label: '结束时间', align: 'center', width: 100 }, { name: 'progress', label: '进度', align: 'center', width: 80, template: (task) => `${task.progress * 100}%` } ]; // 调整行高与表格一致 gantt.config.row_height = 30; gantt.config.scale_height = 30; gantt.config.grid_width = 500; gantt.templates.task_text = (start, end, task) => task.text; gantt.init(this.$refs.ganttContainer); // 绑定事件 gantt.attachEvent('onTaskSelected', (id) => { this.currentSelectedTask = id; this.scrollToTableRow(id); }); // 绑定展开/折叠事件 gantt.attachEvent('onAfterTaskOpen', (id) => { this.ganttExpandState.set(id, true); this.syncGanttExpandToTable(id, true); }); gantt.attachEvent('onAfterTaskClose', (id) => { this.ganttExpandState.set(id, false); this.syncGanttExpandToTable(id, false); }); // 获取甘特图DOM元素 const ganttGrid = document.querySelector('.gantt_grid'); const ganttDataArea = document.querySelector('.gantt_data_area'); // 监听表格滚动事件 const tableBody = this.$refs.table.$el.querySelector('.el-table__body-wrapper'); if (tableBody) { tableBody.addEventListener('scroll', () => { // 同步垂直滚动 if (ganttDataArea) { ganttDataArea.scrollTop = tableBody.scrollTop; } // 同步水平滚动 const tableHeader = this.$refs.table.$el.querySelector('.el-table__header-wrapper'); if (tableHeader && ganttGrid) { ganttGrid.scrollLeft = tableHeader.scrollLeft; } }); } this.ganttInitialized = true; console.log('甘特图初始化成功'); } catch (e) { console.error('甘特图初始化失败:', e); } }, // ... 其他方法保持不变 ... </script> <style scoped> /* 新增样式 */ .page-container { padding: 20px; background-color: #f5f7fa; height: calc(100vh - 60px); } .search-wrapper { background-color: #fff; padding: 15px 20px; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); margin-bottom: 20px; } .table-container { background-color: #fff; padding: 15px; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); height: calc(100vh - 180px); overflow: auto; } .gantt-container { background-color: #fff; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); padding: 5px; height: calc(100vh - 180px); overflow: auto; } /* 表格标题行样式 */ :deep(.el-table__header) th { height: 30px; padding: 0; background-color: #f8f8f9; } /* 甘特图标题行样式 */ :deep(.gantt_grid_head_cell) { height: 30px; line-height: 30px; padding: 0 5px; background-color: #f8f8f9; border-right: 1px solid #e0e0e0; font-weight: bold; } /* 甘特图时间刻度样式 */ :deep(.gantt_scale_cell) { height: 30px; line-height: 30px; border-bottom: 1px solid #e0e0e0; background-color: #f8f8f9; } /* 对齐表格和甘特图的边框 */ :deep(.el-table--border) { border: 1px solid #ebeef5; } :deep(.gantt_grid, .gantt_grid_head, .gantt_data_area) { border: 1px solid #ebeef5; } /* 其他样式保持不变 */ </style> ``` ## 关键修复点说明 1. **行高统一**： - 设置甘特图行高（`row_height`）和时间刻度高度（`scale_height`）为30px，与表格行高一致 - 调整表格标题行高度为30px 2. **滚动同步**： - 监听表格的滚动事件 - 将表格的垂直滚动位置同步到甘特图数据区域 - 将表格的水平滚动位置同步到甘特图网格区域 3. **样式优化**： - 统一表格和甘特图的背景色和边框样式 - 设置固定高度容器确保两者高度一致 - 调整内边距和字体样式使视觉效果更协调 4. **布局调整**： - 设置表格和甘特图容器高度一致（`calc(100vh - 180px)`） - 添加滚动条确保内容可滚动 这些修改将确保表格和甘特图的标题行高度一致，同时保持滚动同步，提供更好的用户体验。

<think>问题：甘特图时间线列没有数据 可能原因： 1. 初始化甘特图时，数据尚未准备好或数据格式不正确。 2. 在`initTaskGantt`方法中，可能因为某些条件导致没有初始化甘特图。 3. 甘特图实例创建失败或配置有误。 检查点： - 确保`this.listData`有数据，并且每条数据都有`planStartDate`和`planEndDate`。 - 确保在`getList`方法中，获取数据后调用了`initVisibleGantts`，并且在`$nextTick`中执行，确保DOM更新完成。 - 检查`initTaskGantt`方法中的逻辑，特别是容器是否存在以及是否已经初始化过。 另外，我们注意到在`initTaskGantt`中，我们使用了`gantt.createGanttInstance()`来创建实例。根据dhtmlx-gantt文档，`createGanttInstance`方法用于创建一个新的甘特图实例，但需要确保dhtmlx-gantt版本支持（企业版支持多实例）。 但是，社区版可能不支持`createGanttInstance`方法。因此，如果使用的是社区版，我们需要换一种方式：为每个任务创建一个新的甘特图实例，但要注意避免冲突。 如果社区版不支持多实例，那么我们需要使用其他库或自己绘制简单的甘特条。 考虑到性能和多实例的问题，我们可以采用轻量级的解决方案：不使用dhtmlx-gantt，而是用纯CSS或SVG绘制简单的进度条来表示时间线。 但根据需求，我们需要显示时间轴，包括开始和结束日期，以及进度。我们可以自己实现一个简单的甘特条。 修改方案：不使用dhtmlx-gantt，而是自己用div绘制一个简单的甘特条。 具体步骤： 1. 在时间线列中，我们根据任务的开始日期、结束日期以及当前日期，计算任务条的位置和长度。 2. 由于每个任务的时间范围可能不同，我们需要一个统一的参考时间范围（比如整个项目的时间范围）来定位每个任务条的位置。但这里每个任务独立，所以我们可以用该任务自己的时间范围来绘制一个任务条，显示任务持续时间和进度。 但是，由于每个单元格独立，我们可以只显示该任务的时间条（从开始到结束），并用另一种颜色表示进度。 实现： 在时间线列的模板中，我们可以这样写： ```html <div class="gantt-cell"> <div class="gantt-bar" :style="getGanttBarStyle(row)"></div> <div class="gantt-progress" :style="getGanttProgressStyle(row)"></div> </div> ``` 样式： ```css .gantt-cell { position: relative; height: 50px; background: #f0f2f5; } .gantt-bar { position: absolute; top: 20px; /* 垂直居中 */ height: 10px; background: #e0e0e0; border-radius: 5px; } .gantt-progress { position: absolute; top: 20px; height: 10px; background: #67C23A; border-radius: 5px; } ``` 计算样式： 我们需要将任务条的长度设置为100%（表示整个任务的时间跨度），但这样无法体现不同任务的时间跨度差异。因为每个单元格只展示当前任务，所以我们可以用固定长度来表示任务条（比如根据任务持续时间占某个基准时间跨度的比例？），但这样并不直观。 另一种思路：在单元格内，我们用一个时间轴背景（比如分成10份，每份代表时间跨度的10%），然后任务条覆盖整个背景，但用实际持续时间的比例来显示长度。但这样每个任务的时间跨度不同，无法统一。 考虑到每个单元格独立，我们可以不显示时间刻度，只显示一个任务条，任务条的长度固定（100%的单元格宽度），但根据任务的实际开始和结束日期相对于整个项目的时间范围来定位？这样需要整个项目的时间范围，但我们没有。 因此，我们改变需求：在时间线列中，我们只显示该任务的进度条（不考虑与其他任务的时间比较），即用整个单元格宽度代表该任务的时间跨度（从开始到结束），然后用一个进度条表示已经完成的比例。 但是，这样无法显示具体的时间点，只能显示进度比例。而进度比例在进度列已经有了。 所以，我们退一步：在时间线列中，我们只显示一个简单的进度条，表示该任务的完成百分比，与进度列的区别是，我们用一个横条显示，类似甘特图的进度，但不显示时间范围。 这样就没有必要使用dhtmlx-gantt了。 根据上述分析，我们决定自己绘制一个简单的进度条，表示任务的完成百分比。 修改时间线列的模板： ```html <el-table-column label="时间线" min-width="300"> <template slot-scope="{row}"> <div class="simple-gantt-bar"> <div class="gantt-progress" :style="{ width: row.schedule + '%' }"></div> </div> </template> </el-table-column> ``` 样式： ```css .simple-gantt-bar { height: 20px; background: #e0e0e0; border-radius: 10px; overflow: hidden; } .gantt-progress { height: 100%; background: #67C23A; border-radius: 10px; } ``` 这样，时间线列就变成了一个进度条，和进度列重复了。所以，我们可能需要改变。 我们想要的是显示任务的时间跨度（开始日期到结束日期）以及当前进度。但由于单元格独立，无法显示时间跨度，所以我们只能显示进度。 因此，如果不需要显示时间跨度，我们可以去掉这一列，或者换一种方式。 如果我们还是想显示时间跨度，我们可以这样： 在单元格内，我们显示一个时间轴，背景为整个单元格（代表从开始到结束），然后用一个进度条表示当前时间线（比如今天）和任务进度的关系。 具体实现： 1. 计算任务的总天数（开始日期到结束日期的天数）。 2. 计算从开始日期到今天的天数（如果今天在开始日期之前，则为0；如果今天在结束日期之后，则为总天数）。 3. 计算进度条的位置（从开始到今天的比例）和已完成进度的比例（row.schedule）。 这样，我们可以用两个条：一个表示时间进度（从开始到今天），另一个表示任务进度（已完成的部分）。 样式设计： 整个背景条代表整个任务时间段，时间进度用浅色表示，任务进度用深色覆盖在时间进度上。 但是，这样需要知道今天日期。 代码实现： 在模板中： ```html <div class="timeline-bar"> <div class="time-progress" :style="getTimeProgressStyle(row)"></div> <div class="task-progress" :style="getTaskProgressStyle(row)"></div> </div> ``` 计算两个样式： 1. 时间进度（今天在任务时间段内的位置）的宽度 = (今天 - 开始日期) / 总天数 * 100% 2. 任务进度（已完成）的宽度 = row.schedule% 注意：任务进度不能超过时间进度（如果任务进度超过时间进度，说明提前完成，可以显示为100%）。 但是，这样设计可能比较复杂，而且需要实时计算。 考虑到简单性，我们只显示任务进度条（用绿色）和时间进度条（用蓝色），并叠加显示。 修改后的方案： 由于时间关系，我们采用简单的叠加进度条： 整个背景：灰色 时间进度：蓝色（从开始到今天的比例） 任务进度：绿色（完成的比例，但不超过时间进度？） 但实际上，任务进度和时间进度是两个维度，我们可以并排显示，但不要叠加。 因此，我们分成两个进度条，上下排列。 但这样高度不够，我们可以用两个div，分别显示时间进度和任务进度。 修改模板： ```html <div class="timeline-container"> <div>时间进度: {{ timeProgress }}%</div> <div class="timeline-bar"> <div class="time-progress" :style="{ width: timeProgress + '%' }"></div> </div> <div>任务进度: {{ row.schedule }}%</div> <div class="timeline-bar"> <div class="task-progress" :style="{ width: row.schedule + '%' }"></div> </div> </div> ``` 这样会占用太多空间，不适合表格行。 因此，我们回到最初的想法：在时间线列中，我们只显示一个简单的任务进度条（和进度列重复），或者我们去掉这一列，因为已经有了进度列。 考虑到用户体验，我们可以保留时间线列，但用更直观的方式：用文字显示开始日期到结束日期，以及一个进度条（表示完成百分比）。 例如： 开始日期 - 结束日期 [====> ] 50% 但这样会占用空间，而且文字和进度条同时显示可能拥挤。 综合权衡，我们决定暂时去掉时间线列，因为已经有了计划开始日期、计划结束日期和完成百分比三列，信息已经完整。 如果一定要显示时间线，我们可以考虑在鼠标悬停时用Tooltip显示一个更详细的时间线。 因此，我建议：如果甘特图列无法正常显示，且我们不需要复杂的甘特图，可以去掉这一列。 但是，根据问题要求，我们需要将甘特图与列表合并。所以，我们尝试自己绘制一个简单的任务条，不依赖dhtmlx-gantt。 简单任务条的实现（仅表示任务持续时间和进度）： 由于每个单元格独立，我们无法统一时间轴，所以只能显示该任务自身的持续时间条，用整个单元格宽度代表任务的持续时间，然后用一个子div表示进度。 步骤： 1. 计算任务的持续时间（天数）。 2. 用整个div作为背景（灰色），宽度100%代表总天数。 3. 用另一个div作为进度（绿色），宽度为（完成百分比）%。 这样，我们只显示进度，和进度列的效果一样，所以没有时间信息。 为了显示时间信息，我们在进度条上方或下方添加文字，显示开始日期和结束日期。 例如： ```html <div class="custom-gantt"> <div class="gantt-dates"> <span>{{ row.planStartDate }}</span> <span>{{ row.planEndDate }}</span> </div> <div class="gantt-bar"> <div class="gantt-progress" :style="{ width: row.schedule + '%' }"></div> </div> </div> ``` 样式： ```css .custom-gantt { display: flex; flex-direction: column; } .gantt-dates { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; } .gantt-bar { height: 10px; background: #e0e0e0; border-radius: 5px; overflow: hidden; } .gantt-progress { height: 100%; background: #67C23A; border-radius: 5px; } ``` 这样，每个任务的时间线列就会显示开始日期、结束日期和一个进度条。 我们不需要复杂的甘特图库，也能表达出时间跨度和进度。 修改代码： 1. 删除之前嵌入甘特图的代码。 2. 使用上述自定义的简单时间线。 具体代码修改如下：</think>甘特图时间线列没有数据的原因可能是由于以下问题导致的： ### 主要问题分析 1. **甘特图初始化时机问题**：`initTaskGantt` 方法在 `getList` 方法中被调用，但 `flatData` 没有正确初始化 2. **DOM 引用问题**：`$refs` 在表格渲染完成前可能无法正确获取 3. **数据格式问题**：甘特图需要特定格式的数据 4. **样式冲突**：甘特图容器可能被隐藏或尺寸不正确 ### 修复后的代码 ```vue <script> // ... 其他导入保持不变 ... import gantt from 'dhtmlx-gantt'; import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'; export default { name: 'Planview', data() { return { // ... 其他数据保持不变 ... ganttInstances: new Map(), // 存储甘特图实例 }; }, mounted() { this.getList(); }, methods: { // 初始化单个任务的甘特图（修复版） initTaskGantt(row) { // 确保DOM已渲染 this.$nextTick(() => { const refName = `gantt_${row.uid}`; const container = this.$refs[refName]?.[0]; if (!container || container._ganttInitialized) return; // 创建独立的甘特图实例 const taskGantt = gantt.createGanttInstance(); taskGantt.config.show_chart = true; taskGantt.config.show_grid = false; taskGantt.config.scale_height = 0; taskGantt.config.readonly = true; taskGantt.config.autosize = true; // 简化配置 taskGantt.config.scales = []; taskGantt.config.columns = []; // 设置时间范围 const start = new Date(row.planStartDate); const end = new Date(row.planEndDate); // 添加任务 taskGantt.parse({ data: [{ id: row.uid, text: '', start_date: start, end_date: end, progress: row.schedule / 100, duration: this.calculateDuration(row.planStartDate, row.planEndDate) }] }); // 初始化甘特图 taskGantt.init(container); this.ganttInstances.set(row.uid, taskGantt); container._ganttInitialized = true; // 调整甘特图尺寸 setTimeout(() => { taskGantt.render(); }, 100); }); }, // 计算任务持续时间（天） calculateDuration(start, end) { if (!start || !end) return 1; try { const startDate = new Date(start); const endDate = new Date(end); return Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24)) || 1; } catch (e) { console.error('日期计算错误:', e); return 1; } }, // 获取数据（修复版） async getList() { try { const res = await listPlan(this.queryParams); this.listData = this.handleTree(res.data, 'uid', 'parentUid'); // 确保数据有效 this.listData.forEach(item => { if (!item.planStartDate) item.planStartDate = new Date().toISOString().split('T')[0]; if (!item.planEndDate) item.planEndDate = new Date(Date.now() + 86400000).toISOString().split('T')[0]; }); this.$nextTick(() => { // 初始化所有可见行的甘特图 this.initVisibleGantts(); }); } catch (error) { console.error('获取数据失败:', error); } }, // 初始化所有可见行的甘特图（修复版） initVisibleGantts() { if (!this.listData || this.listData.length === 0) return; // 先初始化根节点 this.listData.forEach(root => { this.initTaskGantt(root); }); // 递归初始化子节点 const initChildren = (node) => { if (node.children && node.children.length > 0) { node.children.forEach(child => { this.initTaskGantt(child); initChildren(child); }); } }; this.listData.forEach(root => initChildren(root)); }, // 树展开/折叠时处理子任务甘特图 handleExpandChange(row, expanded) { if (expanded && row.children) { this.$nextTick(() => { row.children.forEach(child => this.initTaskGantt(child)); }); } }, // 组件销毁时清理甘特图实例 beforeDestroy() { this.ganttInstances.forEach(instance => { try { instance.destructor(); } catch (e) { console.error('甘特图清理失败:', e); } }); this.ganttInstances.clear(); }, // ... 其他方法保持不变 ... } }; </script> <style scoped> /* 新增甘特图单元格样式 */ .gantt-cell { position: relative; overflow: visible; background: transparent; padding: 5px 0; } /* 调整甘特图样式 */ :deep(.gantt_task_line) { border-radius: 3px; height: 20px !important; top: 15px !important; } :deep(.gantt_task_progress) { border-radius: 3px; height: 20px !important; } :deep(.gantt_scale_cell) { display: none !important; } :deep(.gantt_grid) { display: none !important; } :deep(.gantt_task_content) { display: none !important; } /* 其他样式保持不变 */ </style> ``` ### 修复说明： 1. **DOM 渲染时机问题**： - 使用 `$nextTick` 确保 DOM 渲染完成后再初始化甘特图 - 添加了 100ms 的延迟渲染确保容器尺寸正确 2. **数据有效性检查**： ```javascript // 确保日期数据有效 this.listData.forEach(item => { if (!item.planStartDate) item.planStartDate = new Date().toISOString().split('T')[0]; if (!item.planEndDate) item.planEndDate = new Date(Date.now() + 86400000).toISOString().split('T')[0]; }); ``` 3. **甘特图配置简化**： ```javascript // 简化配置，只显示任务条 taskGantt.config.show_chart = true; taskGantt.config.show_grid = false; taskGantt.config.scale_height = 0; taskGantt.config.columns = []; ``` 4. **样式优化**： ```css /* 隐藏不需要的元素 */ :deep(.gantt_scale_cell) { display: none !important; } :deep(.gantt_grid) { display: none !important; } ``` 5. **递归初始化**： ```javascript // 递归初始化子节点 const initChildren = (node) => { if (node.children && node.children.length > 0) { node.children.forEach(child => { this.initTaskGantt(child); initChildren(child); }); } }; ``` ### 备选方案：使用纯 CSS 实现简单甘特图 如果 dhtmlx-gantt 仍然有问题，可以使用纯 CSS 实现： ```vue <template> <!-- 修改甘特图列 --> <el-table-column label="时间线" min-width="300"> <template slot-scope="{row}"> <div class="simple-gantt"> <div class="gantt-bar" :style="getGanttStyle(row)"></div> <div class="gantt-progress" :style="getProgressStyle(row)"></div> <div class="gantt-dates"> <span>{{ formatDate(row.planStartDate) }}</span> <span>{{ formatDate(row.planEndDate) }}</span> </div> </div> </template> </el-table-column> </template> <script> // ... 其他代码 ... methods: { // 获取甘特图样式 getGanttStyle(row) { const duration = this.calculateDuration(row.planStartDate, row.planEndDate); return { width: '100%', backgroundColor: '#eee' }; }, // 获取进度样式 getProgressStyle(row) { return { width: `${row.schedule}%`, backgroundColor: this.getProgressColor(row.schedule), height: '20px', borderRadius: '4px' }; }, // 格式化日期 formatDate(dateStr) { if (!dateStr) return ''; const date = new Date(dateStr); return `${date.getMonth()+1}/${date.getDate()}`; }, // ... 其他方法 ... } </script> <style scoped> .simple-gantt { position: relative; height: 50px; display: flex; flex-direction: column; justify-content: center; } .gantt-bar { height: 20px; border-radius: 4px; position: relative; overflow: hidden; } .gantt-progress { position: absolute; top: 0; left: 0; height: 100%; transition: width 0.3s ease; } .gantt-dates { display: flex; justify-content: space-between; font-size: 12px; color: #666; margin-top: 5px; } </style> ``` ### 关键改进点： 1. **增强错误处理**： - 添加了日期数据的默认值 - 增加了数据有效性检查 - 添加了更详细的错误日志 2. **优化渲染流程**： - 使用 `$nextTick` 确保 DOM 准备就绪 - 添加延迟渲染处理动态尺寸 - 递归初始化所有节点 3. **简化甘特图**： - 隐藏所有非必要元素 - 只显示任务进度条 - 移除复杂的时间刻度 4. **资源管理**： - 在组件销毁时清理甘特图实例 - 使用 Map 存储实例便于管理