el-tooltip动态内容＜br /＞标签不解析问题_el-tooltip content动态

在使用ElementUi的el-tooltip时，显示的content内容是个动态的属性值，在包含< br />这种标签时是不被解析的，如下：

<template>
  <el-tooltip effect="dark" :content="content" placement="top-start">
    <el-button>上左</el-button>
  </el-tooltip>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      content: "哈喽<br/>这是测试的内容"
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

会变成

应改成如下这种写法：

<template>
  <el-tooltip effect="dark" placement="top-start">
    <div slot="content" v-html="content"></div>
    <el-button>上左</el-button>
  </el-tooltip>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      content: "哈喽<br/>这是测试的内容"
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

然后就可以啦