11、Gantt 动态改变布局 layout

<Select
  v-model:value="layoutConfigValue"
  style="width: 100px; margin-right: 10px"
  @select="setLayoutConfigFuc"
>
  <Option value="gridAndTimeLine">全部</Option>
  <Option value="grid">仅工单列表</Option>
  <Option value="timeLine">仅甘特图</Option>
</Select>

const ganttData = reactive<{
  layoutConfigValue: string;
}>({
  layoutConfigValue: 'gridAndTimeLine',
});
// --------------------分割线--------------------
/**
 * gantt layout 布局切换
 */
function setLayoutConfigFuc(type) {
  // 改变布局
  setLayoutConfig(type);
}

// 动态修改布局
      function setLayoutConfig(level, width = 800) {
        console.log(level);
        switch (level) {
          case 'gridAndTimeLine':
            // 布局
            //展示配置滚动条
            gantt.config.layout = {
              css: 'gantt_container',
              cols: [
                {
                  width: width,
                  rows: [
                    {
                      view: 'grid',
                      scrollX: 'gridScroll',
                      scrollable: true,
                      scrollY: 'scrollVer',
                    },
                    { view: 'scrollbar', id: 'gridScroll', group: 'horizontal' },
                  ],
                  // gravity: 2
                },
                { resizer: true, width: 1 },
                {
                  rows: [
                    { view: 'timeline', scrollX: 'scrollHor', scrollY: 'scrollVer' },
                    { view: 'scrollbar', id: 'scrollHor', group: 'horizontal' },
                  ],
                },
                { view: 'scrollbar', id: 'scrollVer' },
              ],
            };
            gantt.resetLayout();
            gantt.render();
            break;
          case 'grid':
            // 布局
            gantt.config.layout = {
              css: 'gantt_container',
              rows: [
                {
                  cols: [
                    {
                      // 默认任务列表
                      view: 'grid',
                      scrollX: 'scrollHor',
                      scrollY: 'scrollVer',
                    },
                    {
                      view: 'scrollbar',
                      id: 'scrollVer',
                    },
                  ],
                },
                {
                  view: 'scrollbar',
                  id: 'scrollHor',
                },
              ],
            };
            gantt.resetLayout();
            gantt.render();
            break;
          case 'timeLine':
            // 布局
            gantt.config.layout = {
              css: 'gantt_container',
              rows: [
                {
                  cols: [
                    {
                      // 默认甘特图（时间线）
                      view: 'timeline',
                      scrollX: 'scrollHor',
                      scrollY: 'scrollVer',
                    },
                    {
                      view: 'scrollbar',
                      id: 'scrollVer',
                    },
                  ],
                },
                {
                  view: 'scrollbar',
                  id: 'scrollHor',
                },
              ],
            };
            gantt.resetLayout();
            gantt.render();
            break;
        }
      }