@femessage/v-gantt NPM

v-gantt

中文文档

Introduction

Base on vue + element-ui, create web version omniplan。

⬆ Back to Top

Feature

fold & collapse tree node
support tree header slot
drag gantt node to modify dates
drag to modify duration
jump to 'today'
col unit base on days or weeks or months
monthly view hover node to display date info
click tree node to jump to gantt node
click milestone's line to jump to milestone node
get chinese festivals by public-api

⬆ Back to Top

Quick Start

v-gantt is based on el-button, el-select, el-progress and el-tree. So you need to register those in global environment with Vue.component or simply with Vue.use(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>