vue-gantt-table v0.1.6

vue-gantt-table

Vue 下的任务、进度及甘特图组件

📦 安装

$ npm i vue-gantt-table -S

🔨 使用

<template>
  <div class="gantt-table-test">
    <GanttTable :data="tasks" />
  </div>
</template>
<script>
import { GanttTable } from "vue-gantt-table";

export default {
  components: { GanttTable },
  data() {
    return {
      tasks: [
        {
          id: "1",
          name: "张三",
          baselineStart: "2023-05-01 12:00:00",
          baselineEnd: "2023-05-03 08:00:00",
          actualStart: "2023-05-01 09:00:00",
          actualEnd: "2023-05-04 17:00:00",
          children: [
            {
              id: "3",
              name: "王五",
              baselineStart: "2023-05-01 12:00:00",
              baselineEnd: "2023-05-03 08:00:00",
              actualStart: "2023-05-01 09:00:00",
              actualEnd: "2023-05-04 17:00:00",
              progressValueStr: "70%",
            },
          ],
          progressValueStr: "90%",
        },
        {
          id: "2",
          name: "李四",
          baselineStart: "2023-05-03 16:00:00",
          baselineEnd: "2023-05-04 18:00:00",
          actualStart: "2023-05-03 09:00:00",
          actualEnd: "2023-05-04 17:00:00",
          progressValueStr: "80%",
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
.gantt-table-test {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
</style>

🔠 属性

🎺 事件