1.问题描述:

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



2. 问题原因:

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


3.解决方法:

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

(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");
    }
  }]


Logo

快速构建 Web 应用程序

更多推荐