vue甘特图设置时间线为今天
时间: 2023-07-26 16:29:58 浏览: 45
要将 Vue 甘特图设置为今天的时间线,您需要在组件中使用 `today` 属性,该属性接受一个 Date 对象,表示今天的日期。以下是一个示例代码:
```html
<template>
<div>
<gantt :tasks="tasks" :day-width="100" :today="today" />
</div>
</template>
<script>
import Gantt from 'vue-gantt'
export default {
components: {
Gantt
},
data() {
return {
today: new Date(), // 将 today 属性设置为当前日期
tasks: [
{
id: 1,
name: 'Task 1',
start: '2022-03-01T00:00:00.000Z',
end: '2022-03-01T01:00:00.000Z',
color: '#f0ad4e'
},
{
id: 2,
name: 'Task 2',
start: '2022-03-01T02:00:00.000Z',
end: '2022-03-01T04:00:00.000Z',
color: '#5cb85c'
},
{
id: 3,
name: 'Task 3',
start: '2022-03-01T05:00:00.000Z',
end: '2022-03-01T08:00:00.000Z',
color: '#d9534f'
}
]
}
}
}
</script>
```
在上面的代码中,我们将 `today` 属性设置为当前日期。这将使甘特图的时间线显示从今天开始。如果需要设置不同的日期,只需将 `today` 属性设置为所需的日期,如下所示:
```javascript
today: new Date('2022-03-01')
```
这将设置时间线为 2022 年 3 月 1 日。