Vue结合el-table甘特图

### Vue 中结合 `el-table` 实现甘特图在 Vue.js 开发环境中，Element Plus 的 `el-table` 是一种强大的组件，用于展示复杂的数据结构。然而，`el-table` 并未直接提供甘特图的功能支持。要实现甘特图效果，可以通过自定义列渲染的方式，在表格的右侧绘制时间轴和任务进度条。以下是基于 Vue 和 Element Plus 的解决方案： #### 1. 数据准备为了构建甘特图，需要设计合适的数据模型来存储任务的时间范围和其他属性。通常包括以下字段： - **name**: 任务名称。 - **start_date**: 起始日期。 - **end_date**: 结束日期。 - **progress**: 进度百分比（可选）。 ```javascript const tableData = [ { name: 'Task A', start_date: new Date('2023-09-01'), end_date: new Date('2023-09-07'), progress: 80 }, { name: 'Task B', start_date: new Date('2023-09-05'), end_date: new Date('2023-09-12'), progress: 60 } ]; ``` #### 2. 自定义甘特图表栏通过 `el-table-column` 的 `scoped-slot` 功能，可以动态生成甘特图部分的内容。具体来说，利用 HTML `<div>` 或 SVG 来模拟甘特图的任务条形显示。 ##### 示例代码 ```vue <template> <el-table :data="tableData" style="width: 100%">  <el-table-column prop="name" label="任务名称"></el-table-column> <el-table-column prop="start_date" label="开始日期"> <template #default="scope">{{ formatDate(scope.row.start_date) }}</template> </el-table-column> <el-table-column prop="end_date" label="结束日期"> <template #default="scope">{{ formatDate(scope.row.end_date) }}</template> </el-table-column>  <el-table-column label="甘特图" width="400"> <template #default="scope"> <div class="gantt-container"> <div class="task-bar" :style="{ left: calculatePosition(scope.row.start_date, scope.row.end_date), width: calculateWidth(scope.row.start_date, scope.row.end_date) }" ></div> </div> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: 'Task A', start_date: new Date('2023-09-01'), end_date: new Date('2023-09-07') }, { name: 'Task B', start_date: new Date('2023-09-05'), end_date: new Date('2023-09-12') } ] }; }, methods: { formatDate(date) { const options = { year: 'numeric', month: 'short', day: 'numeric' }; return date.toLocaleDateString(undefined, options); }, calculatePosition(start, end) { // 假设整个甘特图宽度为 400px，计算起始位置 const totalDays = this.getTotalDays(); const daysFromStart = (this.getMinDate().getTime() - start.getTime()) / (1000 * 60 * 60 * 24); return `${(daysFromStart / totalDays) * 400}px`; }, calculateWidth(start, end) { // 计算任务持续天数占总天数的比例 const totalDays = this.getTotalDays(); const taskDuration = (end - start) / (1000 * 60 * 60 * 24); return `${(taskDuration / totalDays) * 400}px`; }, getTotalDays() { const minDate = this.getMinDate(); const maxDate = this.getMaxDate(); return (maxDate - minDate) / (1000 * 60 * 60 * 24); }, getMinDate() { return Math.min(...this.tableData.map(item => item.start_date)); }, getMaxDate() { return Math.max(...this.tableData.map(item => item.end_date)); } } }; </script> <style scoped> .gantt-container { position: relative; height: 20px; background-color: lightgray; } .task-bar { position: absolute; height: 100%; background-color: steelblue; } </style> ``` 上述代码实现了基本的甘特图功能[^1]。左侧展示了任务的基本信息，而右侧则通过 CSS 定位技术呈现了任务的时间跨度。 #### 3. 扩展功能建议如果需要更复杂的交互体验，比如拖拽调整任务时间、缩放视图等功能，则可能需要引入专门的甘特图库，例如 DHTMLX Gantt 或者 vue-gantt-chart 等插件。 --- ###

阅读全文