v gantt

📊Gantt chart

FEMessage

Vue

v-gantt

Introduction
Feature
Quick Start
Development
- Todo
Links
Inspiration
Contributing
Contributors
License

Introduction

甘特图组件。基于 vue + element-ui，打造 web 版 omniplan。

⬆ Back to Top

Feature

折叠、展开树节点
支持树 header slot
整体拖拽甘特图节点
拖拽甘特图节点右侧，可以更改持续时间
点击【今天】按钮，快速跳转到今天列
点击【天】按钮，可切换至【周】、【月】视图（可配置默认视图）
月视图下 hover 滑块可显示节点日期
点击树节点，跳转到该甘特图节点
点击里程碑线 🧵，跳转到里程碑行
通过公共 api 获取中国节假日信息

⬆ Back to Top

Quick Start

v-gantt 依赖了 el-button、el-select、el-progress 和 el-tree 组件。请在全局环境使用 Vue.component or Vue.use(Element) 注册 element 组件

yarn add @femessage/v-gantt @femessage/element-ui

<template>
  <v-gantt style="height: 400px;" :data.sync="data" />
</template>

<script>
  export default {
    data() {
      const y = new Date().getFullYear()
      const m = `${new Date().getMonth() + 1}`.padStart(2, 0)
      const d = (date) => `${y}-${m}-${date}`
      return {
        data: [
          {
            id: 'group-1',
            name: '群组-1',
            children: [
              {
                id: 'item-1',
                name: '叶节点-1',
                progress: 30,
                startDate: d('06'),
                endDate: d('07'),
              },
            ],
          },
          {
            id: 'milestone-1',
            name: '里程碑-1',
            date: d('10'),
            done: true,
          },
        ],
      }
    },
  }
</script>