React前端库，table中的每列内容，进行强制换行的解决方法

Z时代
2024-01-10
分类：综合

react

1.问题描述：

管理系统的前端实现用的是React+ant design，但是React的table，每列的值，如果用 或者/r/n 来实现，则还是换行无效。如下图，SN值是多个以分号分隔的值，现在希望多个sn值能分行显示，将分号替换成 或者/r/n ，列值就变成了"value1 value2 " 或者"value1 /r/n value2"，还是换行无效。也就是单元格换行无效。

2. 问题原因：

因为和其他的前端库不同，例如easyUI或者bootstrap，React中的table的单元格，利用后端返回的列值，直接替换字符串中的分隔符为 或者/r/n来换行，是无效的。

3.解决方法：

将前端代码的table的column代码中，要换行的那列，配置render属性，将标签 和每个显示值混搭的方式，返回给列来显示（千万不能把标签放到引号里面，否则不识别其是标签）。

（1）截图如下：

（2）代码如下：

columns: [
  {
    title: '服务器IP',
    dataIndex: 'ip',
  }, {
    title: 'SN',
    dataIndex: 'sn',
        render: (text, record) =>{
            let snArray=[];
            snArray=text.split(";");
            let br=<br></br>;
            let result=null;
            if(snArray.length<2){
                return text;
            }
            for(let i=0;i<snArray.length;i++){
                if(i==0){
                    result=snArray[i];
                }else{
                    result=<span>{result}{br}{snArray[i]}</span>;
                }
            }
            return <div>{result}</div>;
        }
  }, {
    title: '服务',
    dataIndex: 'pathName'
  }, {
    title: '级别',
    dataIndex: 'priority',
    render: function (data) {
      if (data === 0) {
        return <Badge status="error" text="Critic"/>
      } else {
        return <Badge status="warning" text="Warning"/>;
      }
    }
  }, {
    title: '创建时间',
    dataIndex: 'creatDate',
    render: function (data) {
      return moment(data).format("YYYY-MM-DD HH:mm:ss");
    }
  }]