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

如图：

要点：主要是通过<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/>换行，直接就给当成字符串输出了…………尝试各种方法，最终用上面的实现

1.首先你拼接的html

let content=<button onclick="come()"></button>;

2.在methods中创建一个函数

methods:function(){

come:function(){
    alert('你好！再见')
}

},
3.嫁接的桥梁

created(){

let bridge=this;
window.come=bridge.come;

},

在vue 的html拼接在添加点击事件用原生的onclick来触发事件，将事件挂在window上

方法一：

<template>
  <div v-html="htmlData">
  </div>
</template>

<script>
export default {
  data() {
    return {
      htmlData: "",
    };
  },
  mounted() {
    window.clickEvent = this.clickEvent;
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.htmlData = '<div οnclick="clickEvent()"></div>';
    },
    clickEvent(url) {
      console.log("getPsd", url);
    },
  },
};
</script>

方法二：

<template>
  <div ref="HTML">
  </div>
</template>

<script>
export default {
  data() {
    return {
      htmlData: "",
    };
  },
  mounted() {
    window.clickEvent = this.clickEvent;
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
		var str = `
            <div οnclick="clickEvent()"></div>
          `;
          this.$refs.HTML.innerHTML += str
          // 解决的方式有很多中大家可已自行百度，例如使用事件代理
          // 因为绑定的是原生事件本实例采纳的是以下解决方式
         function clickEvent(){
             console.log('完美解决');
         }
        //  window.clickEvent=function(event, el){
        //      console.log('完美解决');
        //  }
    },
  },
};
</script>