1.问题:
目前有打印需求遇到了点问题,打印时表头太长导致出现横向滚动条,而借助于 react-to-print只能打印出视图区可见内容,所以打印的时候滚动条里面的内容没打印到。
现在为了完整打印页面内容,只能让表格列超过换行,这样才不会出现滚动条。
2.解决:
我们需要将列 colums
数组项使用render
函数渲染,添加whiteSpace:'pre-wrap'
样式。
const columns = [
{ title: '序号', dataIndex: 'index', valueType: 'index', width: 48, fixed:'left'},
{ title: '客户', dataIndex: 'client', valueType: 'select', valueEnum: customerOptions,
fieldProps:{ showSearch: true }
},
{ title: '发货', dataIndex: 'deliver', hideInSearch: true, width: 120},
]
columns.forEach((item,index)=>{
if(index){
item.render = (a,param)=>[
<div style={{whiteSpace:'pre-wrap'}}>{param[item.dataIndex]}</div>
]
}
})