美文网首页
前端通过后端传过来的'\n' ,'
'等字符串换行失败问

前端通过后端传过来的'\n' ,'
'等字符串换行失败问

作者: 玩大神的简书 | 来源:发表于2019-04-20 13:41 被阅读0次

    后台推送换行符 '\n' 或 '<br/>' 等字符串到前台不会换行

    详细描述

    后台逻辑处理返回String字符串,其中包含\n<br/>等换行符号,但是前端渲染时候却并没有真正的换行
    也尝试了大佬的各种 \r\n,<br/>,&lt;br/&gt;等都没有作用

    解决方案

    下面的解决方案来自https://www.jianshu.com/p/1d0ec501b318
    前台用的vue+iview这是我表格中的一列,推送过来字符串包含换行符\n,增加class:'comment'类选择器

    {
                title: '备注',
                align: 'left',
                key: 'COMMENT',
                render: (h, params) => {
                  if(params.row.COMMENT == "") {
                    return h('span', '--');
                  }else{
                    return h('span',{
                      class:'comment'
                    },params.row.COMMENT)
                  }
                }
              }
    

    newline_with_str_from_backend1.png

    后面增加下面的CSS,就可以利用后台推送的\n来换行了

    .comment{
        white-space:pre-wrap;
    } 
    
    newline_with_str_from_backend2.png

    相关文章

      网友评论

          本文标题:前端通过后端传过来的'\n' ,'
          '等字符串换行失败问

          本文链接:https://www.haomeiwen.com/subject/hinkgqtx.html