el-table-column :formatter v-html 是否能同时使用
时间: 2024-10-12 15:02:39 浏览: 23
基于ElementUI二次封装的支持自适应列宽的tablecolumn列组件
在 Element UI 的表格组件(el-table-column)中,`:formatter` 属性用于自定义列的内容渲染,它接收一个函数作为值,该函数会在遍历数据时被调用,返回处理后的字符串。而 `v-html` 是 Vue.js 的指令,用于将 HTML 渲染到元素的 innerHTML 上。
如果你要在 formatter 函数中插入 HTML 内容,理论上可以直接使用 `v-html`,因为 formatter 函数的返回值会被解析并插入到表格中。然而,这样做有一定的安全风险,因为它可能导致 XSS(跨站脚本攻击)。为了防止这种情况,建议你在将 HTML 插入之前先对数据进行适当的清洗和编码。
示例:
```html
<template>
<el-table-column
:formatter="function(item) {
return `<div>${item.safeHtml}</div>`; // 使用 safeHtml 替代 item.html
}"
></el-table-column>
</template>
<script>
export default {
methods: {
// 这里假设 safeHtml 是对 data 中 html 字段进行了安全处理的版本
function(item) {
let safeHtml = yourDataCleaningFunction(item.html);
return `<div>${safeHtml}</div>`;
}
}
};
</script>
```
阅读全文