(宏代码仅供参考,如和实际应用场景不匹配,需要自行调整相关代码)
示例说明
在交互仪表盘中新增宏代码,隐藏指定的列:
版本及客户端说明
1.smartbi版本:V10.5.8
2.客户端:PC
3.浏览器:谷歌浏览器(Chrome)
设置方法
- 准备好要修改的交互仪表盘
对象 | 组件 | 事件 | |
1 | 选择“组件” | 选择需要隐藏列的那个“表“组件 | 选择“onBeforeRender(组件渲染前)“ |
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', }) } |
---|
最后效果如下。