Vue3 甘特图示例：简单实现 | 使用 Composition API 构建甘特图

<p>以下是一个用 Vue3 写的简单甘特图示例：</p>
<p>`<template>
&lt;div class=&quot;gantt-chart&quot;&gt;
&lt;div class=&quot;gantt-header&quot;&gt;
&lt;div v-for=&quot;task in tasks&quot; :key=&quot;task.id&quot; class=&quot;gantt-task&quot;&gt;{{ task.name }}</div>
&lt;/div&gt;
&lt;div class=&quot;gantt-body&quot;&gt;
&lt;div v-for=&quot;task in tasks&quot; :key=&quot;task.id&quot; class=&quot;gantt-row&quot;&gt;
&lt;div
v-for=&quot;bar in task.bars&quot;
:key=&quot;bar.id&quot;
class=&quot;gantt-bar&quot;
:style=&quot;{ left: bar.start + 'px', width: bar.duration + 'px' }&quot;
&gt;</div>
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;</p>
<p>`<script>
import { ref } from 'vue';</p>
<p>export default {
setup() {
const tasks = ref([
{
id: 1,
name: 'Task 1',
bars: [
{ id: 1, start: 0, duration: 100 },
{ id: 2, start: 200, duration: 150 },
],
},
{
id: 2,
name: 'Task 2',
bars: [
{ id: 3, start: 50, duration: 200 },
],
},
{
id: 3,
name: 'Task 3',
bars: [
{ id: 4, start: 100, duration: 100 },
{ id: 5, start: 300, duration: 150 },
],
},
]);</p>
<pre><code>return { tasks };
</code></pre>
<p>},
};
&lt;/script&gt;</p>
<p>`<style scoped>
.gantt-chart {
width: 100%;
height: 300px;
border: 1px solid #ccc;
overflow-x: scroll;
}</p>
<p>.gantt-header {
display: flex;
height: 30px;
background-color: #f2f2f2;
}</p>
<p>.gantt-task {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid #ccc;
}</p>
<p>.gantt-body {
height: calc(100% - 30px);
overflow-y: scroll;
}</p>
<p>.gantt-row {
display: flex;
height: 30px;
border-bottom: 1px solid #ccc;
}</p>
<p>.gantt-bar {
position: absolute;
height: 100%;
background-color: #007bff;
}
&lt;/style&gt;</p>
<p>此示例中，我们使用了 Vue3 的 Composition API，将任务数据存储在 ref 中，并在模板中使用 v-for 指令渲染任务和任务条。任务数据包含一个 id 和名称，并包含一个 bars 数组，表示任务的时间段。每个任务条都有一个 id、开始和持续时间，通过计算样式将其绘制在甘特图中。</p>
<p>请注意，此示例只是一个简单的示例，没有包含完整的甘特图功能。您可以根据自己的需求进行扩展和修改。</p>