Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

页面中有多个甘特图时显示有重大bug #10

Closed
mfkwgizhoujian opened this issue Dec 22, 2021 · 6 comments
Closed

页面中有多个甘特图时显示有重大bug #10

mfkwgizhoujian opened this issue Dec 22, 2021 · 6 comments
Assignees
Labels
bug Something isn't working

Comments

@mfkwgizhoujian
Copy link

mfkwgizhoujian commented Dec 22, 2021

使用版本:v1.1.10
表现在两个方面:
1.一个页面中同时使用多个甘特图时,显示的都是最后那个甘特图的样子;
2.假如使用类似tab的形式切换甘特图,切换的是display: none与display: block,这里分两种情况:
2.1 如果只有两个tab,第1个默认显示,第2个默认隐藏,那么初始化时第1个甘特图虽然显示的是第2个甘特图的数据,但表面看上去显示还是正常的,但是让第2个甘特图也显示时,第2个甘特图右侧会直接将设置面板显示出来;
2.2 如果有三个tab,第1个默认显示,第2个默认隐藏,那么初始化时第1个甘特图右边只会显示进度条,表格边框和日期都不显示,空白一片,然后让第2个和第3个甘特图显示时,后2个右侧的设置面板会显示出来。

测试代码很简单,如下:

<template>
  <div style="height: 30%">
    <gantt :datas="ganttDatas[0]" />
  </div>
  <div style="height: 30%" v-show="divShow">
    <gantt :datas="ganttDatas[1]" />
  </div>
  <div style="height: 30%" v-show="divShow">
    <gantt :datas="ganttDatas[2]" />
  </div>
  <el-button type="primary" @click="onClick">测试</el-button>
</template>

<script>
import { ref } from 'vue'
import Gantt from '@/components/Gantt.vue'

export default {
  name: 'Home',
  components: { Gantt },
  setup () {
    const ganttData1 = {
      id: '01',
      startTime: new Date('2021-10-30').getTime(),
      endTime: new Date('2021-11-05').getTime()
    }

    const ganttData2 = {
      id: '02',
      startTime: new Date('2021-11-06').getTime(),
      endTime: new Date('2021-11-15').getTime()
    }

    const ganttData3 = {
      id: '03',
      startTime: new Date('2021-11-15').getTime(),
      endTime: new Date('2021-11-25').getTime()
    }

    var ganttDatas = ref([ganttData1, ganttData2, ganttData3])

    const divShow = ref(false)
    const onClick = () => {
      divShow.value = true
    }

    return {
      ganttDatas,
      divShow,
      onClick
    }
  }
}
</script>
@mfkwgizhoujian
Copy link
Author

image
html代码在描述中未显示,截个图

@jeremyjone
Copy link
Collaborator

Hi:@mfkwgizhoujian

1、import Gantt from '@/components/Gantt.vue' 该组件代码请贴出来
2、你说的几种情况,请贴下错误效果

@jeremyjone jeremyjone added the bug Something isn't working label Dec 22, 2021
@jeremyjone jeremyjone self-assigned this Dec 22, 2021
@mfkwgizhoujian
Copy link
Author

Hi:@mfkwgizhoujian

1、import Gantt from '@/components/Gantt.vue' 该组件代码请贴出来 2、你说的几种情况,请贴下错误效果

组件代码在下一个bug中贴出来了,错误效果截图如下:
image
image

@mfkwgizhoujian
Copy link
Author

image
image
这是两个tab的显示截图,前面回复的是3个tab的

@jeremyjone
Copy link
Collaborator

Hi:@mfkwgizhoujian

我已重现该问题,待更新。在此期间,请使用 v_if 切换

@jeremyjone
Copy link
Collaborator

@mfkwgizhoujian

使用多个,请更新至 v1.1.12+

但 tab 之间仍然需要使用 v-if。不要使用 v-show 进行切换多页面,这会影响未展示组件的数据展示。

参考 Demo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants