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

react antd Table 表格 td超出自动换行相关推荐

td 内容自动换行 table表格td设置宽度后自动换行
td 内容自动换行 table表格td设置宽度后自动换行控制样式 table { table-layout:fixed; WORD-BREAK:break-all; } td { word-wrap ...
小技巧--table表格td内容垂直居中方法
小技巧–table表格td内容垂直居中方法前端页面编写时,table表格排版时最容易遇到的,就是单元格内的内容无法居中,又不能写行高时,可以使用以下方法: table td {vertical-al ...
Table表格文字超出后循环滚动的动画实现方案核心逻辑
需求前几天公司要求做一个动态表格:大概就是可配置的(颜色,字体,行数等等),用作屏幕展示.因此就要求表格文字在超出宽度时候可以有动画循环滚动展示内容.大概这个样子: 项目使用vue框架,动画因为涉及 ...
React antd table使用react-resizable实现伸缩列
首先声明注意点: 1.设置列宽的width一定要用number类型.(如果不使用number类型,会出现第一次点击时卡顿的情况) 2.less中需要设置类的样式,如果无效,可以尝试加上:global( ...
HTML去掉table表格td之间的缝隙
现在写html很少用到table表格了,今天在学js的时候写了一个用表格显示九九乘法表的案例,我做完之后觉得不好看就加了个样式,给格子加边框,但是做好之后会有缝隙. 觉得可能是td默认有间距就加了修改 ...
antd table 表格中英文字母不换行问题
在table表格中 ,如果英文字母,就会出现不换行问题解决办法在对应column中给加上wordWrap: 'break-word', wordBreak: 'break-word' 即可 con ...
antd table表格选中每行设置背景色
1.文档显示,table表格中有rowClassName属性 Table 参数 --------------------------------- 说明------------------------ ...
table表格td中英文数字超出单元格自动换行
字母和数字会被浏览器默认是一个字符串或者说一个单词,所以不会自动换行解决方案:在当前td上加style="word-break:break-all;"
table表格td内内容自动换行
项目开发时,遇到问题:td内传入数据,全是字母,不会自动换行一般字母数字/特殊符号的话,会被浏览器默认是一个字符串或者说一个单词,不会自动换行所以需要设置一下,让表格内容自动换行. 1.给td标签 ...

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

react antd Table 表格 td超出自动换行相关推荐

最新文章

热门文章