今天真是破防的一天,Ant design Pro V6做ProList调试的时候直接崩溃

<ProList<API.Chart>
itemLayout="vertical"
rowKey="id"
dataSource={chart1}
// 1. 配置分页
pagination={{
current: currentPage,
pageSize: 1,
total: total,
showSizeChanger: false,
showQuickJumper: false,
onChange: (page) => {
setCurrentPage(page);
fetchData();
},
}}
// 2. 搜索配置 - 内置搜索栏,对应图中的搜索框
search={{
filterType: 'query', // 查询模式
searchText: '搜索图表', // 搜索框占位文字
labelWidth: 'auto',
}}
columns={columns}
renderItem={(item: any, index) => (
<div
key={item.id}
style={{
background: '#fff',
borderRadius: 12,
marginBottom: 16,
padding: 20,
boxShadow: '0 1px 2px rgba(0,0,0,0.03)',
}}
>
{/* 桌面端:左右布局 */}
<div className="chart-card-desktop" style={{ display: 'flex', gap: 24, alignItems: 'flex-start' }}>
{/* 左侧信息 */}
<div className="chart-info" style={{ flex: 1 }}>
<div style={{ fontSize: 16, fontWeight: 500, marginBottom: 8 }}>
{item.name || '未命名图表'}
</div>
<div style={{ fontSize: 13, color: '#8c8c8c', marginBottom: 12 }}>
图表类型:{item.chartType || '未定义'}
</div>
<div style={{
background: '#f6f9ff',
padding: '12px 16px',
borderRadius: 8,
}}>
<div style={{ fontSize: 12, color: '#1890ff', marginBottom: 4 }}>
分析目标
</div>
<div style={{ fontSize: 13, color: '#262626' }}>
{item.goal || '未设置'}
</div>
</div>
</div>
{/* 右侧图表:占60%宽度 */}
<div className="chart-wrapper" style={{ flex: '0 0 60%', minWidth: 0 }}>
{options ? (
<ReactECharts option={options} style={{ height: 300, width: '100%' }} />
) : (
<div style={{
height: 300,
background: '#fafafa',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 8,
color: '#bfbfbf'
}}>
请先在左侧进行提交
</div>
)}
{chartResult && (
<div style={{
marginTop: 12,
fontSize: 13,
color: '#595959',
background: '#f9f9f9',
padding: '10px 12px',
borderRadius: 6
}}>
<span style={{ color: '#1890ff' }}>总结:</span>
{chartResult}
</div>
)}
</div>
</div>
{/* 手机端:上下布局(默认隐藏,通过媒体查询显示) */}
<div className="chart-card-mobile" style={{ display: 'none' }}>
{/* 上方信息 */}
<div style={{ marginBottom: 16 }}>
<div style={{ fontSize: 16, fontWeight: 500, marginBottom: 8 }}>
{item.name || '未命名图表'}
</div>
<div style={{ fontSize: 13, color: '#8c8c8c', marginBottom: 12 }}>
图表类型:{item.chartType || '未定义'}
</div>
<div style={{
background: '#f6f9ff',
padding: '12px 16px',
borderRadius: 8,
marginBottom: 16
}}>
<div style={{ fontSize: 12, color: '#1890ff', marginBottom: 4 }}>
分析目标
</div>
<div style={{ fontSize: 13, color: '#262626' }}>
{item.goal || '未设置'}
</div>
</div>
</div>
{/* 下方图表 */}
<div>
{options ? (
<ReactECharts option={options} style={{ height: 300, width: '100%' }} />
) : (
<div style={{
height: 300,
background: '#fafafa',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 8,
color: '#bfbfbf'
}}>
请先在左侧进行提交
</div>
)}
{chartResult && (
<div style={{
marginTop: 12,
fontSize: 13,
color: '#595959',
background: '#f9f9f9',
padding: '10px 12px',
borderRadius: 6
}}>
<span style={{ color: '#1890ff' }}>总结:</span>
{chartResult}
</div>
)}
</div>
</div>
</div>
)}
/>
我就做了一个简单的看板,分页搜索功能加上,仅此而已。
它居然oom了!!!
解决方案明天想吧,累了。

浙公网安备 33010602011771号