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

浅浅的花香味﹌ 2022-12-26 09:18 269阅读 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

发表评论取消回复

表情：

评论列表（有 0 条评论，269人围观）

还没有评论，来说两句吧...

相关阅读

相关处理文本框输入换行，前端展示换行消息

![在这里插入图片描述][20200609114400324.png] <pre>{ { item.text }}</pre> 或者 <s

旧城等待，/ 2023年02月16日 06:56/ 0 赞/ 40 阅读

相关 html 自动换行熟悉

<text style="word-break:break-all;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

港控/mmm°/ 2023年02月09日 14:28/ 0 赞/ 237 阅读

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

需求：动态拼接元素并实现换行如图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

浅浅的花香味﹌/ 2022年12月26日 09:18/ 0 赞/ 270 阅读

相关 html script 换行,JavaScript中怎么换行

js中换行的方法：1、使用【\\n】换行符，代码为【alert("第一行\\n第二行")】；2、使用【\\r】换行符，代码为【alert("第一行\\r第二行")】；3、使用H

痛定思痛。/ 2022年10月06日 11:51/ 0 赞/ 300 阅读

相关把数组按指定的格式拼接成一个字符串

package day11; /\\ \ java基础:StringBuffer \ Author:知而无涯 \ Description:把数组按指定的格式拼接成

矫情吗；*/ 2022年06月06日 08:17/ 0 赞/ 194 阅读

相关 CSS —— html 自动换行

涉及三个属性： white-space：规定如何处理空白，是否换行，默认值：normal（超出时自动换行）； word-wrap：normal （默认，只在内容的断点换行，

朴灿烈づ我的快乐病毒、/ 2022年05月18日 02:17/ 0 赞/ 308 阅读

相关 jsp——动态拼接html

最近接触了一些用ajax动态拼接HTML，其实“动态拼接HTML”就是根据特定的条件显示或不显示一段HTML页 <table> <tbody> <

悠悠/ 2022年05月15日 04:51/ 0 赞/ 565 阅读

相关 vue中控制字符串文本在指定位置换行

在vue项目中，通过双花括号（"\{ \{\}\}"）数据绑定的字符串文本，如下 <div class="qrhelp-answer">

浅浅的花香味﹌/ 2022年03月29日 02:14/ 0 赞/ 1734 阅读

相关 html表格自动换行

一、方法简介用表格做网页排版的时候，一般都能正常使用。偏偏有时会碰到一段连续的英文词或者一堆感叹号(!!!)把网页就撑开的现象：（总结了一下，只要在CSS中定义了

你的名字/ 2021年12月18日 23:11/ 0 赞/ 589 阅读

相关 HTML_04 —— 换行

换行：<br> 或者：<br/> 注意：<br\\>不可以的哦 <!doctype html> <html> <head> <met

我就是我/ 2021年12月17日 00:57/ 0 赞/ 278 阅读