el-table-column :formatter 插入html 标签<br/> 直接打印在html上并没有生效 如何解决
时间: 2024-10-13 07:06:04 浏览: 33
`el-table-column` 的 `formatter` 属性用于自定义表格列的数据展示,当你想插入 HTML 标签如 `<br>` 期望它显示换行符时,有时候可能不会直接生效。这是因为浏览器为了安全原因,会阻止HTML字符串直接插入到DOM中,尤其是对于一些不受信任的来源。
有几种解决方案可以尝试:
1. 使用 `v-html` 指令:Vue提供了一个特殊的指令 `v-html`,允许安全地将HTML插入到元素中。你可以这样使用:
```html
<template>
<el-table-column label="标题" prop="content" formatter="formatContent">
<span v-html="item.content"></span>
</el-table-column>
</template>
<script>
export default {
methods: {
formatContent(value) {
return '<br>' + value;
}
}
};
</script>
```
确保你的数据源 `item.content` 已经包含 `<br>`,并在 `formatContent` 中处理后再插入。
2. 如果你控制着整个数据源,可以在渲染之前将 `<br>` 替换成 `<br>` 或者转义HTML形式的 `<br>`。
3. 如果你想完全避免HTML插入风险,可以考虑在后端处理好内容格式化,返回预渲染好的纯文本格式。
阅读全文