FAQ中心
页面树结构
转至元数据结尾
转至元数据起始

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

问题说明

         在自助仪表盘中使用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
    })
}

        效果展示：

     

  • 无标签

2 评论

  1. 刘晓敏 发表：

    V97版本可参考：

    //类型：ClientSide	对象：Tab1	事件：onAfterRender
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'
    let tabDoms: HTMLElement = document.getElementsByClassName(selector_nav)
    console.warn(tabDoms)
    for (let i = 0; i < tabDoms.length; i++) {
        let tabDom = tabDoms[i]
        tabDom.style.maxWidth = style.width
        tabDom.style.width = style.width
    }
}

  2. 申优 发表：

    在V11版本需要添加优先级标识，如，'700px !important'