###
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: &#
39;Task A&#
39;, start_date: new Date
(&#
39;202
3-09
-01&#
39;
), end_date: new Date
(&#
39;202
3-09
-07&#
39;
), progress: 80 },
{ name: &#
39;Task B&#
39;, start_date: new Date
(&#
39;202
3-09
-05&#
39;
), end_date: new Date
(&#
39;202
3-09
-12&#
39;
), 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" lab
el="任务名称"></
el-table-column>
<
el-table-column prop="start_date" lab
el="开始日期">
<template #default="scope">{{ formatDate
(scope
.row
.start_date
) }}</template>
</
el-table-column>
<
el-table-column prop="end_date" lab
el="结束日期">
<template #default="scope">{{ formatDate
(scope
.row
.end_date
) }}</template>
</
el-table-column>
<!
-- 右侧甘特图
-->
<
el-table-column lab
el="甘特图" 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: &#
39;Task A&#
39;, start_date: new Date
(&#
39;202
3-09
-01&#
39;
), end_date: new Date
(&#
39;202
3-09
-07&#
39;
) },
{ name: &#
39;Task B&#
39;, start_date: new Date
(&#
39;202
3-09
-05&#
39;
), end_date: new Date
(&#
39;202
3-09
-12&#
39;
) }
]
};
},
methods: {
formatDate
(date
) {
const options = { year: &#
39;numeric&#
39;, month: &#
39;short&#
39;,
day: &#
39;numeric&#
39; };
return date
.toLocaleDateString
(undefined, options
);
},
calculatePosition
(start, end
) {
// 假设整个甘特图宽度为 400px，计算起始位置
const total
Days = this
.getTotal
Days
();
const
daysFromStart =
(this
.getMinDate
().getTime
() - start
.getTime
()) /
(1000 * 60 * 60 * 24
);
return `${
(daysFromStart / total
Days
) * 400}px`;
},
calculateWidth
(start, end
) {
// 计算任务持续天数占总天数的比例
const total
Days = this
.getTotal
Days
();
const taskDuration =
(end
- start
) /
(1000 * 60 * 60 * 24
);
return `${
(taskDuration / total
Days
) * 400}px`;
},
getTotal
Days
() {
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: r
elative;
height: 20px;
background
-color: lightgray;
}
.task
-bar {
position: absolute;
height: 100%;
background
-color: ste
elblue;
}
</style>
```
上述代码实现了基本的甘特图功能[^1]。左侧展示了任务的基本信息，而右侧则通过 CSS 定位
技术呈现了任务的时间跨度。
####
3. 扩展功能建议
如果需要更复杂的交互体验，比如拖拽调整任务时间、缩放视图等功能，则可能需要引入专门的甘特图库，例如 DHTMLX Gantt 或者
vue-gantt
-chart 等插件。
---
###
本文介绍了在Vue3中如何使用具名插槽，并结合Element UI的el-table组件进行自定义列表的实现。强调了查看官方文档对于深入学习的重要性，提供了具名插槽的写法示例以及插槽间传值的方法。
扫一扫
851
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
