door-gantt v1.0.0

快速上手

npm i door-gantt vxe-table dayjs --save

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import 'xe-utils';
import VXETable from 'vxe-table';
import 'vxe-table/lib/style.css';
import 'door-gantt/dist/style.css';

const app = createApp(App);
app.use(VXETable);

app.mount('#app');

// App.vue
<template>
  <div id="app">
    <vxe-input v-model="withRef" placeholder="整数类型" type="integer" />
    <div class="door-gantt-demo">
      <DoorGantt
        :width="withRef"
        use-real-time
        start-date="2019-09-02"
        end-date="2019-10-01"
        date-type="monthAndDay"
        :data="data"
        :columns="columns"
        :contextMenuOptions="contextMenuOptions"
        :edit="true"
        :auto-gantt-date-type="false"
        :tree-node="true"
        :use-index-column="true"
        :use-card="false"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { DoorGantt } from 'door-gantt';

  const withRef = ref();
  const data = ref([
    {
      id: '1',
      pid: '0',
      name: '测试1',
      startDate: '2019-09-07',
      realStartDate: '2019-09-10',
      endDate: '2019-10-31',
      realEndDate: '2019-10-19',
    },
    {
      id: '2',
      name: '测试2',
      startDate: '2019-09-20',
      endDate: '2019-10-31',
    },
  ]);

  const contextMenuOptions = ref([
    { label: '任务名称', prop: 'name' },
    { label: '开始时间', prop: 'startDate' },
    { label: '结束时间', prop: 'endDate' },
  ]);
  // 可通过此参数配置列。其中内置有名称name、开始日期startDate、结束日期endDate、前置任务preTask，如果cloumns中有type等于这四个且slot为false时，将使用内置代码，当然除了内容使用内置代码，其他字段你还拥有配置权。另外如果不是为了配置内置列参数，slot中的prv和default仍可以用来自定义列
  const columns = ref([{ type: 'name', minWidth: 200, colType: 'expand' }]);
</script>

<style lang="scss">
  #app {
    color: #2c3e50;
    padding: 20px 25px 0;
  }

  .door-gantt-demo {
    margin: 40px auto;
  }
</style>