element ui中tooltip组件多行文本

最近需求中遇到需要展示多个换行数据，且tooltip也要同步换行

效果如下图所示：

官方文档中提供展示多行文本的方法，利用slot分发content

<el-tooltip placement="top">
    <div slot="content">多行信息<br/>第二行信息</div>
    <el-button>Top center</el-button>
</el-tooltip>

多行文本我这里利用v-for实现，tooltip中的效果正常，但是hover的文本信息显示缺失，控制台中查看未渲染所有的v-for div

<el-tooltip placement="top">
    <div slot="content">
        <div v-for="item in arr" :key="item">
            {{ item }}
        </div>
    </div>
    <div v-for="item in arr" :key="item">
        {{ item }}
    </div>
</el-tooltip>

换成使用v-html显示，手写一个数组转为字符串拼接<br/>的方法，成功实现

genHtml(arr) {
  let res = '';
  for(let i = 0; i < arr.length; i++) {
    res = res + `${arr[i]}` + `<br/>`;
  };
  return res;
}

<el-tooltip placement="top">
    <div slot="content">
        <div v-for="item in arr" :key="item">
            {{ item }}
        </div>
    </div>
    <div class="line" v-html="genHtml(arr)" />
</el-tooltip>

记得给v-html的div补充单行文本溢出样式

.line {
  white-space: nowrap;
  text-overflow: ellipsis;
}