el-table 制作甘特图

使用 el-table 创建甘特图
为了实现甘特图功能，可以利用 el-table 组件来构建基础结构并结合其他组件或自定义渲染函数完成可视化部分。具体方法如下：
数据准备
创建一个合适的数据模型用于存储项目信息以及对应的时间区间。
const projectData = [
{
name: '任务A',
start: new Date('2024-01-01'),
end: new Date('2024-01-15')
},
// 更多的任务...
];
登录后复制
表格配置
设置表格列以适应甘特图的需求，在此案例中至少需要两列：一列为任务名称；另一列为显示进度条的区域[^1]。
<template>
<div>
<el-table :data="projectData">
<!-- 左侧展示任务名 -->
<el-table-column prop="name" label="任务"></el-table-column>

<!-- 右侧绘制甘特图表 -->
<el-table-column width="80%" align="center" label="进度">
<template slot-scope="{ row }">
<gantt-bar :start="row.start" :end="row.end"/>
</template>
</el-table-column>
</el-table>
</div>
</template>
登录后复制
自定义甘特图栏
通过编写一个新的Vue组件 <gantt-bar> 来处理日期范围到图形化表示之间的转换逻辑。
<script setup lang="ts">
import { defineProps, computed } from 'vue';

interface Props {
start: Date;
end: Date;
}

defineProps<Props>();

// 计算样式宽度百分比或其他属性以便于正确呈现甘特图柱状体
const barStyle = computed(() => ({
left: `${/* 起始位置计算 */}px`,
width: `${/* 宽度计算 */}%`
}));
</script>

<template>
<div class="progress-container">
<div class="bar" :style="barStyle"></div>
</div>
</template>

<style scoped>
.progress-container {
position: relative;
height: 20px;
}
.bar {
background-color: blue;
position: absolute;
top: 0;
bottom: 0;
}
</style>
登录后复制
上述代码片段展示了如何基于Element Plus框架下的el-table组件搭建简易版甘特图界面。需要注意的是实际应用时可能还需要考虑更多细节如缩放比例调整、交互操作支持等功能扩展。