页面树结构

版本比较

标识

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

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

(警告)此宏仅针对10.5.8版本表格,V108版本“表”组件

注:V10.5.15表格组件已经重构,不再支持这里的方法,以实际在宏API中看到的为准(V11有支持宏代码隐藏列portlet15表格组件已经重构,不支持该方法。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