如何给el-table中展示模板字符串的内容 并支持html
要在el-table中展示模板字符串的内容并支持HTML,你可以使用el-table-column的scoped slot来自定义列的内容。
首先,确保你的模板字符串中包含HTML标签,并将其作为字符串传递给el-table的数据源。
然后,在el-table-column中使用scoped slot来自定义列的内容。你可以使用v-html指令来解析HTML标签。
下面是一个示例代码:
<template>
<el-table :data="tableData">
<el-table-column prop="content" label="内容">
<template slot-scope="{ row }">
<div v-html="row.content"></div>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ content: "<b>粗体文本</b>" },
{ content: "<i>斜体文本</i>" },
{ content: "<a href='https://example.com'>链接</a>" }
]
};
}
};
</script>
在上面的示例中,tableData数组中的每个对象都有一个content属性,其中包含模板字符串的内容。在el-table-column的scoped slot中,使用v-html指令来解析content属性的HTML标签。
这样,el-table就会渲染出包含HTML标签的内容了
原文地址: http://www.cveoy.top/t/topic/iGJY 著作权归作者所有。请勿转载和采集!