gantt-elastic进度图死循环数据处理？

  • Z时代
  • 2024-02-15
  • 分类：IT

 <gantt-elastic
      ref="ganttElastic"
      :options="options"
      :tasks="dataShow"
      :dynamicStyle="dynamicStyle"
      @tasks-changed="tasksUpdate"
      @options-changed="optionsUpdate"
      @dynamic-style-changed="styleUpdate"
      @mounted="ganttMounted"
      @updated="ganttUpdated"
    >
      <gantt-header :options="option" slot="header" />
    </gantt-elastic>
dataShow: [
        {
          id: 1,
          label: '节点一',
          status: '<a style=\'color:#0077c0;\'>已完成</a>',
          start: '2023-05-23', // 计划开始时间（-24 * 5 代表5天前）
          duration: this.getDiffDay('2023-05-23', '2023-05-26') * 24 * 60 * 60 * 1000, // 周期（天、时、分、秒  ====  7天）
          end: '2023-05-26', // 计划完成时间（计划开始时间 + 周期）
          percent: this.getDiffDay('2023-05-25', '2023-05-28') * 100, // 工作完成百分比（完成时间/周期）
          type: 'task',
          realStart: '2023-05-25',
          realEnd: '2023-05-28',
          delete: '删除',
          style: {
            base: {
              fill: '#FBBFBD55',
              stroke: '#FBBFBD55'
            },
          },
          collapsed: true, // 实现折叠（当有子模块时）
        },
      ],
tasksUpdate(task) {
    // console.log(task)
    // this.tasks = [];
    // this.dataShow = task;
    },

tasksUpdate方法要怎么做处理，请求获取到的数据放在了data的dataShow数组里面了，首次dataShow没数据会报错，大哥们帮忙看看

回答：

data() {
  return {
    dataShow: [],
  }
},
mounted() {
  this.fetchData().then(() => {
    // gantt图组件要在数据加载完毕后手动更新，在这里调用tasksUpdate方法。
    this.tasksUpdate();
  });
},
methods: {
  fetchData() {
    // 后端服务获取数据
    return this.yourAPIService.getTasks().then(tasks => {
      this.dataShow = tasks;
    });
  },
  tasksUpdate() {
  },
}

以上是 gantt-elastic进度图死循环数据处理？ 的全部内容， 来源链接： utcz.com/p/934604.html

回到顶部