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>

🔠 属性

属性名	类型	默认值	说明
data	Array	[]	任务数据数组
timeUnit	String	"day"	当前选中的时间单位(["month", "day", "hour"])
mapIdTo	String, Number	"id"	任务 id 的映射字段
mapNameTo	String	"name"	任务名称的映射字段
mapBaselineStartTo	String	"baselineStart"	任务计划开始时间的映射字段
mapBaselineEndTo	String	"baselineEnd"	任务计划结束时间的映射字段
mapActualStartTo	String	"actualStart"	任务实际开始时间的映射字段
mapActualEndTo	String	"actualEnd"	任务实际结束时间的映射字段
mapChildrenTo	String	"children"	任务的子任务的映射字段
mapProgressValueTo	String	"progressValueStr"	任务进度的映射字段
mapConnectorTo	String	"connector"	任务的连接器的映射字段
showActual	Boolean	true	是否显示实际时间
showBaseline	Boolean	true	是否显示计划时间
showLabel	Boolean	true	是否显示任务标签
showProgresse	Boolean	true	是否显示任务进度
showConnector	Boolean	true	是否显示连接器
showTooltip	Boolean	true	是否显示提示框

🎺 事件

事件名	说明	传参
on-task-add	添加任务成功	添加的任务
on-task-update	编辑任务成功	编辑后的任务
on-task-delete	删除任务成功	要删除的任务
on-connector-create	创建连接器成功	创建的连接器
on-connector-delete	删除连接器成功	删除的连接器