vue动态拼接html，按指定格式展示（如换行）

浅浅的花香味﹌ 2022-12-26 09:18 287阅读 0赞

需求：动态拼接元素并实现换行

如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hnZzkyMw_size_16_color_FFFFFF_t_70][]

要点：主要是通过**<pre>**标签，通过"**\\n**"实现换行；

{label: "使用情况", prop: "useInfo", formatter: row => {
                  let useInfo = row.useInfo;
                  let info = "";
                  if (useInfo != null && useInfo.length > 0){
                    let index = 1;
                    useInfo.forEach(item=>{
                      info += (index++) + "、" + item.name+"(ID:"+item.id+")\n";
                      info += "当天："+(item.day ? item.day : 0) +"次；";
                      info += "当月："+(item.month ? item.month : 0)+"次；";
                      info += "累计："+(item.all ? item.all : 0)+"次；";
                      info += "\n";
                    }
                  )
    
                  return (<el-tooltip effect="dark"  placement="left-start">
                          <p><span>使用详情</span> <i class="el-icon-info" /></p>
                          <div slot="content" style="line-height: 20px;">
                          <pre>{info}</pre>
                          </div>
                  </el-tooltip>);
    
                  }
                  return "";
                }
              }

吐槽……

通过不适用<pre>标签，直接<br/>换行，直接就给当成字符串输出了…………尝试各种方法，最终用上面的实现

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hnZzkyMw_size_16_color_FFFFFF_t_70]: /images/20221120/180395d2f44c461eae1d30882cb05236.png