前言
我们在开发React + antd 项目过程中,经常会遇到表格单元格文字超长此类问题,超长的文字会影响表格布局,那么我们该如何解决呢?话不多说,先直接看一下效果。
单元格文字超长处理
/**
* 变更单元格样式
* @param {number} length - 单元格长度
*/
const handleCell = (length) => ({
style: {
overflow: 'hidden',
maxWidth: length,
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
},
onClick: (e) => {
const { target } = e
if (target.style.whiteSpace === 'normal') {
target.style.whiteSpace = 'nowrap'
} else {
target.style.whiteSpace = 'normal'
}
},
})
const columns = [
{
dataIndex: 'remark',
title: '备注',
width: 180,
onCell: () => handleCell(180),
}
]
如果对你有用,麻烦点赞加关注,谢谢!