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

(宏代码仅供参考,如和实际应用场景不匹配,需要自行调整相关代码)

示例说明

在交互仪表盘中新增宏代码,隐藏指定的列:

版本及客户端说明

1.smartbi版本:V10.5.8

2.客户端:PC

3.浏览器:谷歌浏览器(Chrome)

设置方法

  1. 准备好要修改的交互仪表盘

对象组件事件
1

选择“组件”

选择需要隐藏列的那个“表“组件

选择“onBeforeRender(组件渲染前)“

/******************************宏代码说明******************************
 * version:Smartbi V10.5.8
 * 类型:ClientSide
 * 对象:对应的组件
 * 事件:onBeforeRender
 * 效果描述:隐藏清单表或交叉表指定的列

 * 第二行代码,那里的columnIndex 值2,对应着表格上要隐藏的列的序号。需要按实际情况改一下,剩余的其它代码不需要修改。

 *********************************************************************/

function main(page: IPage, portlet: ITablePortlet) {

    const columnIndex = 2

    portlet.appendCss(`.el-table__header col:nth-child(${columnIndex})`, {

        width: '0 !important',

    })

//宏通过修改表头列宽,达到隐藏行的效果,但是列宽为0时,文本内容会进行换行,撑高整体行高。出现表头行变宽时添加

 portlet.appendCss(`.theme__table-col-header-row .theme__table-column:nth-child(${columnIndex}) .sx-header-label`, { display: 'none', })


    portlet.appendCss(`.el-table__body col:nth-child(${columnIndex})`, {

        width: '0 !important',

    })

    portlet.appendCss(`.el-table__row.theme__table-row>td:nth-child(${columnIndex})>div`, {

        display: 'none',

    })

}

最后效果如下。


  • 无标签