Ant deisgn Table在tbody外包一层div

user_tYDk6iCh
  • 61

我想要自定义antd Tabled的表格体,在tbody外包一层div

image.png

根据文档中的components属性,想覆盖掉body部分,但是没有效果

const renderBody = () => {
    return (
        <div id="bodyWraper">
            <tbody className="ant-table-tbody" style={{ backgroundColor: "green" }}>
                <tr key={'first'} className="ant-table-row">
                    <td key={'1_1'} className="ant-table-cell">111111111111111111</td>
                    <td key={'1_2'} className="ant-table-cell">111111111111111111</td>
                    <td key={'1_3'} className="ant-table-cell">111111111111111111</td>
                </tr>
                <tr key={'second'} className="ant-table-row">
                    <td key={'2_1'} className="ant-table-cell">111111111111111111</td>
                    <td key={'2_2'} className="ant-table-cell">111111111111111111</td>
                    <td key={'2_3'} className="ant-table-cell">111111111111111111</td>
                </tr>
            </tbody>
        </div>
    )
}
<Table
    {...allProps}
    components={{
        body:renderBody
    }}
/>

如果换成

<Table
    {...allProps}
    components={{
        body: {
           wrapper: renderBody
        }
    }}
/>

能够覆盖,但是tbody这个新的tbody总是挤在第一列,貌似与<colgroup>有关
image.png

请问有什么比较好的解决办法吗,还是只能全部使用原生Table重新写了?

回复
阅读 237
1 个回答
✓ 已被采纳

注意:<table>标签的直接子元素不能是<div>

一个可选的 <caption> 元素
零个或多个的 <colgroup> 元素
一个可选的 <thead> 元素
下列任意一个:
零个或多个 <tbody> (en-US)
零个或多个 <tr>
一个可选的 <tfoot> 元素

参考文档

那么描述一下为什么需要在tbody外面加一层div,需要实现什么功能

====== 补充分割线 =======

大概想要一个表头固定,表身能够自动补充数据并进行滚动。
固定表头外加虚拟列表。至于自动滚动的话可以试试在虚拟列表上做手脚。我也没有试验过,提供一个思路仅供参考

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏