Skip to content

🐛 [BUG]ProTable使用树结构数据,嵌套子表格式错误 #11442

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
xli-cube opened this issue Mar 8, 2025 · 1 comment
Open

🐛 [BUG]ProTable使用树结构数据,嵌套子表格式错误 #11442

xli-cube opened this issue Mar 8, 2025 · 1 comment

Comments

@xli-cube
Copy link

xli-cube commented Mar 8, 2025

🐛 bug 描述

ProTable使用树结构数据,嵌套子表,页面错乱,会生成空白tr和td。
即使在expandedRowRender中返回了undefined,也会生成空白表格,页面会有占位。
expandable={{
expandedRowRender: undefined
}}这样写是没问题的

Image

📷 复现步骤 | Recurrence steps

const subTableRender = (record: Module) => {
if(record.type ==='1'){
return (
<ProTable
columns={[{
title: '按钮名称', dataIndex: 'name'
}]}
request={
async (params: ModuleSearch) => {
return await search({...params, pid: record.id, sort: 'desc', filter: 'order_num'});
}
}
pagination={false}
headerTitle={false}
search={false}
options={false}
/>
);
}
return undefined;
}
<ProTable<Module, Pagination>
headerTitle="模块列表"
rowKey="id"
columns={columns}
search={{
labelWidth: 'auto',
}}
actionRef={actionRef}
pagination={{
onChange: (page) => setCurrentPage(page)
}}
request={
async (params: ModuleSearch) => {
return await search({...params, pid: pid, sort: 'desc', filter: 'order_num'});
}
}
rowSelection={{
onChange: (_, selectedRows) => {
setSelectedRows(selectedRows);
}
}}
expandable={{
expandedRowRender: subTableRender
}}
toolBarRender={
() => [
<Button type="primary" key="id" onClick={
() => {
setShowAdd(true);
}}>
新建

]
}
/>

🏞 期望结果 | Expected results

若返回undefined,不应生成dom数据。

💻 复现代码 | Recurrence code

© 版本信息

  • Ant Design Pro 版本: [e.g. 4.0.0]
  • umi 版本
  • 浏览器环境
  • 开发环境 [e.g. mac OS]

🚑 其他信息

@xli-cube
Copy link
Author

xli-cube commented Mar 9, 2025

const expandedRowRender = (record: RecordType, index: number, indent: number, expanded: boolean) => { if (typeof expandable.expandedRowRender === 'function') { const renderResult = expandable.expandedRowRender(record, index, indent, expanded); // 如果返回值为 null 或 undefined,则不渲染 if (renderResult == null) { return null; } return renderResult; } return null; };

expandable.expandedRowRender可以接收函数或undefined,若是函数会创建dom,即使函数返回了undefined也会有空的dom,这并不是我想要的。
最后得出结论,树结构表格不支持嵌套子表

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant