在您的代码中，vlParent 和 outerBox 都被设置为 self 的 body。如果 outerBox 显示了，但是 vlParent 没有展示，可能是因为当您将 outerBox 设置为 self 的 body 时，之前的内容（即 vlParent）被替换掉了。

要解决这个问题，您可以考虑以下两种方法：

方法一：将 outerBox 作为 vlParent 的子元素

可以将 outerBox 添加到 vlParent 中，而不是直接将其设置为 self 的 body。这样，它们就会一起显示。修改如下：

else if ('0BJECTS' == init.type) {
    let self = new Fieldset(init.useLang ? lang(init.title) : init.title);
    let me = this;
    var vlParent = new VLayout().setVerticalAlign('top');
    self.setBody(vlParent); // 将 vlParent 设置为 self 的主体

    // 处理 isOuterOperator 等逻辑...

    for (var i = 0, N = init.child.length; i < N; i++) {
        var initObject = init.child[i];
        var vl = this.initlayout(initObject.child, initObject.path, editable);
        vl.setCSSProperty("paddingBottom", "5px");
        
        if (N > 0 && i >= 1) {
            vl.setCSSProperty("borderTop", "2px solid #E3E3E3");
            vl.setCSSProperty("paddingTop", "10px");
        }
        
        if (initObject.type === 'OBJECTS_OUT_COLLECTION') {
            me.customerOutCollection.layout.addMember(vl);
            me.customerOutCollection.count++;
        } else {
            vlParent.addMember(vl); // 将子元素添加到 vlParent
        }
    }

    // 创建 outerBox
    if (!document.getElementById('outerBox')) {
        const outerBox = document.createElement('div');
        outerBox.id = 'outerBox';
        
        Object.assign(outerBox.style, {
            border: '2px solid #000',
            padding: '19px',
            borderRadius: '5px',
            width: '300px'
        });

        const tabsContainer = document.createElement('div');
        
        Object.assign(tabsContainer.style, {
            display: 'flex',
            marginBottom: '19px'
        });
        
        const tabs = [
            { name: '逾期', content: '逾期内容' },
            { name: '未逾期', content: '未逾期内容' }
        ];
        
        const contentContainer = document.createElement('div');
        
        Object.assign(contentContainer.style, {
            border: '1px solid #000',
            padding: '19px'
        });
        
        const switchTab = (tab, content) => {
            tabsContainer.querySelectorAll('.tab').forEach(t => t.classList.remove('active-tab'));
            tab.classList.add('active-tab');
            contentContainer.textContent = content;
        };
        
        tabs.forEach(({ name, content }) => {
            const tab = document.createElement('div');
            
            tab.textContent = name;
            
            tab.classList.add('tab');
            
            tab.addEventListener('click', () => switchTab(tab, content));
            
            tabsContainer.appendChild(tab);
        });
        
       // 默认选择第一个选项卡
       switchTab(tabsContainer.querySelector('.tab'), tabs[0].content);
       
       outerBox.appendChild(tabsContainer);
       outerBox.appendChild(contentContainer);

       // 将 outerBox 添加到 vlParent 中，而不是替换自我主体
       vlParent.addMember(outerBox);

       const style = document.createElement('style');
       
       style.innerHTML = `
           .tab {
               padding: 10px;
               cursor: pointer;
               border: 1px solid #000;
               margin-right: 5px;
               color: #000;
               background-color: #fff;
           }
           .active-tab {
               background-color: #000;
               color: #fff;
           }
       `;
       
       document.head.appendChild(style);
   }
}

方法二：使用不同的布局容器

如果您希望让这两个部分在视觉上分开，您也可以创建一个新的布局容器，将它添加到 self.body 中，而不影响其他部分。这样可以保持结构清晰。

// 在原有结构上新建一个父布局，用于包含 outerBox
var mainLayout = new VLayout().setVerticalAlign('top'); 
self.setBody(mainLayout);

// 将原来的内容放入主布局中。
mainLayout.addMember(vlParent);

// 创建并添加 outerbox ...

总结

以上两种方法都能有效地解决您的问题。根据您的具体需求，可以选择最适合的方法来实现更好的 UI 布局。通过这种方式，您可以确保所有元素都按预期显示且不会互相覆盖或隐藏。


内容由零声教学AI助手提供，问题来源于学员提问