11、Gantt 动态改变布局 layout 

 1 <Select
 2   v-model:value="layoutConfigValue"
 3   style="width: 100px; margin-right: 10px"
 4   @select="setLayoutConfigFuc"
 5 >
 6   <Option value="gridAndTimeLine">全部</Option>
 7   <Option value="grid">仅工单列表</Option>
 8   <Option value="timeLine">仅甘特图</Option>
 9 </Select>
10 
11 const ganttData = reactive<{
12   layoutConfigValue: string;
13 }>({
14   layoutConfigValue: 'gridAndTimeLine',
15 });
16 // --------------------分割线--------------------
17 /**
18  * gantt layout 布局切换
19  */
20 function setLayoutConfigFuc(type) {
21   // 改变布局
22   setLayoutConfig(type);
23 }
 1 // 动态修改布局
 2 function setLayoutConfig(level) {
 3   console.log(level);
 4   switch (level) {
 5     case 'gridAndTimeLine':
 6       // 布局
 7       //展示配置滚动条
 8       gantt.config.layout = {
 9         css: 'gantt_container',
10         cols: [
11           {
12             width: 720,
13             rows: [
14               {
15                 view: 'grid',
16                 scrollX: 'gridScroll',
17                 // scrollable: true,
18                 scrollY: 'scrollVer',
19               },
20               { view: 'scrollbar', id: 'gridScroll', group: 'horizontal' },
21             ],
22             // gravity: 2
23           },
24           { resizer: true, width: 1 },
25           {
26             rows: [
27               { view: 'timeline', scrollX: 'scrollHor', scrollY: 'scrollVer' },
28               { view: 'scrollbar', id: 'scrollHor', group: 'horizontal' },
29             ],
30           },
31           { view: 'scrollbar', id: 'scrollVer' },
32         ],
33       };
34       gantt.resetLayout();
35       gantt.render();
36       break;
37     case 'grid':
38       // 布局
39       gantt.config.layout = {
40         css: 'gantt_container',
41         rows: [
42           {
43             cols: [
44               {
45                 // 默认任务列表
46                 view: 'grid',
47                 scrollX: 'scrollHor',
48                 scrollY: 'scrollVer',
49               },
50               {
51                 view: 'scrollbar',
52                 id: 'scrollVer',
53               },
54             ],
55           },
56           {
57             view: 'scrollbar',
58             id: 'scrollHor',
59           },
60         ],
61       };
62       gantt.resetLayout();
63       gantt.render();
64       break;
65     case 'timeLine':
66       // 布局
67       gantt.config.layout = {
68         css: 'gantt_container',
69         rows: [
70           {
71             cols: [
72               {
73                 // 默认甘特图（时间线）
74                 view: 'timeline',
75                 scrollX: 'scrollHor',
76                 scrollY: 'scrollVer',
77               },
78               {
79                 view: 'scrollbar',
80                 id: 'scrollVer',
81               },
82             ],
83           },
84           {
85             view: 'scrollbar',
86             id: 'scrollHor',
87           },
88         ],
89       };
90       gantt.resetLayout();
91       gantt.render();
92       break;
93   }
94 }

 

 

 

如果有导出功能的话，使用上述方式可能会导致导出PNG不是完整的gantt。

 

posted @ 2021-11-16 17:42  你在说啥  阅读(467)  评论(0)    收藏  举报