antd Table组件换行问题

1.强制换行

用css强行换行之后内容会重叠

用antd table提供的ellipsis会看不到全部内容

解决方法

将内容字符串按单位拆分成数组元素，返回一个由若干个字符串组成的数组

 /*
    @params str{ String} 要截取的字符串
    @params start { Number } 首次截取的开始索引，每次截取后递增
    @params end { Number } 首次截取的结束索引，每次截取后递增
    @params unit { Number } 每一组个数
*/
    // 将字符串转换成unit个字符为一组的数组
    const createArr = (str, start, end, unit) => {
        let arr = [] //保存每次截取后的字符串
        let counts = Math.ceil(str.length / unit) //循环截取的次数,向上取整
        for (let i = 0; i < counts; i++) {
            let newStr = str.substring(start, end)
            arr.push(newStr)
            start = end
            end += unit
        }
        return arr
    }

在columns的render中return出若干个dom元素

{
            title: '主诊',
            dataIndex: 'zz',
            key: 'zz',
            textAlign: 'center',
            render: (text) => {
                if (text) {
                    return (
                        createArr(text, 0, 12, 12).map(item => {
                            return (<li style={{ lineHeight: '1.5rem' }}>{item}</li>)
                        })
                    )
                }
            }
        },

效果

2.强制不换行

table的配置项

 columns={columns.map(item => { // 通过配置 给每个单元格添加不换行属性
                            const fun = () => ({ style: { whiteSpace: 'nowrap' } });
                            item.onHeaderCell = fun;
                            item.onCell = fun;
                            return item;
                        })}
                        scroll={{x:1600}}

效果是：如果长度过长会自己出现滚动条，内容不会重叠

根据需求选择对应的方法