300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > react antd Table 表格 td超出自动换行

react antd Table 表格 td超出自动换行

时间:2020-11-05 23:36:17

相关推荐

react antd Table 表格 td超出自动换行

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>]}})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。