页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

...

此宏仅针对10.5.8版本表格,V10.5.15表格组件已经重构,不再支持这里的方法,以实际在宏API中看到的为准(V11有支持宏代码隐藏列portlet.hideTableColumn(),可通过宏管理中的“查看API文档”直接查看)。

示例说明

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

...

/******************************宏代码说明******************************
 * 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',

    })

}

最后效果如下。


查看api文档入口

Image Added