提示:本文档的示例代码仅适用于本文档中的示例报表/场景。若实际报表/场景与示例代码无法完全适配(如使用功能不一致,或多个宏代码冲突等),需根据实际需求开发代码。

问题说明

         在自助仪表盘中使用Tab页组件制表,发现当Tab页页签名字较长时显示不全,希望可以调整Tab页签宽度。

        

解决方案

        可参考如下自助仪表盘宏代码:

       

function main(page: IPage, portlet: IStaticTabsPortlet) {
    if (!/(STATIC_TABS)/.test(portlet.getType())) return
    // 页签样式设置
    let style = {
        width: '400px'
    }
    setTabNavitorWidth(portlet, style)
}
/**
 * 设置页签宽度
 */
function setTabNavitorWidth(portlet: IStaticTabsPortlet, style: any) {
    let selector_nav = '.static-tabs__view-label-text'
    portlet.appendCss(selector_nav, {
        'max-width': style.width,
        'width': style.width
    })
}

        效果展示: