需求背景描述:
table表格需要展示很多字段,产品经理考虑到整理要求增加展开行用来展示部分数据。要求隐藏掉第一列的操作,当数据中的children有数据时,则默认全部展开所有数据;反之,只展示一级数据。
大致效果图展示如下:
代码整体实现:
提示:table展示的前提条件需要先判断下数据源是否为空
下面的代码是tsx的形式,大家根据自己的写法进行调整吧
<a-table
loading={'表格加载loading'}
columns={'表头配置'}
row-key={(record: any, index:number) => index}
data-source={'数据源'}
pagination={'分页配置'}
onChange={'切换分页'}
rowClassName={this.setRowClassName} // children的样式控制
defaultExpandAllRows={true} // 默认展开所有children节点
expandIconAsCell={false} // 去除表头栏里+号
expandIconColumnIndex={-1} // 去除表格body里的+号
{...{
scopedSlots: {
// 内嵌children的显示
expandedRowRender:(scope: any) => {
return (
<div>
{
scope.children != null && scope.children.map((item, index) => {
return (
<div>内嵌children数据</div>
)
})
}
</div>
)
}
}
}}
>
</a-table>
内嵌children为空时,样式处理
// 当没有子节点时,隐藏子节点的样式
const setRowClassName = (record) => {
return record.children == null ? Style.noExpand : ''; // 这里的写法根据自己项目css的写法修改
};
style样式,通过查找下一级tr节点控制
.noExpand + tr{
display: none;
}
这是其中的一种实现方式,欢迎大家下面评论其他的实现方式