antd中table组件中如何进行换行操作(react中)
说明
效果
数据
代码
说明
react项目,遇到某字段对应的单元格内需要换行。
最初想偷懒,尝试了在数据中加入回车、使用模板字符串、转义字符,都没用。
最后实现方法是在antd渲染column的对象对应的字段中加入render属性实现。
效果
数据
代码
{ title: '字段名', width: 200, align: center, render: (str, column, index) => { //悬停标题 let title = str.toString(); //特殊字段需要添加表格内回车 if (column === '字段名') { let snArray = []; //splitE是分割符,修改为自己数据的分隔符,我用的是"$;$" snArray = str.split(splitE); //悬停标题将分隔符转义显示 title = snArray.join('\n'); let br = <br></br>; let result = null; if (snArray.length >= 2) { for (let i = 0; i < snArray.length; i++) { if (i === 0) { result = snArray[i]; } else { result = ( <span> {result} {br} {snArray[i]} </span> ); } } str = <div>{result}</div>; } } let html = <label title={title}>{str}</label>; return html; }, }