ant design vue的table组件,从后台接收包含文本内容及样式的字符串数据变量,怎么渲染列,写个简单代码
时间: 2024-05-19 12:15:20 浏览: 11
好的,这是一个Vue的代码示例:
<template>
<div>
<a-table :columns="columns" :data-source="dataSource">
<template #content="{text}">
<div v-html="text"></div>
</template>
</a-table>
</div>
</template>
<script>
export default {
data() {
return {
columns: [
{
title: "内容",
dataIndex: "text",
key: "text",
},
],
dataSource: [
{
text: '<span style="color: red">这是一个红色的文字</span>',
},
{
text:
'<p style="font-size: 20px; font-weight: bold">这是一个加粗的大字</p>',
},
],
};
},
};
</script>
这里我使用了Ant Design Vue的table组件,通过columns和dataSource分别定义表格的列和数据源。在每一列中,我使用了v-html指令来渲染传入的包含文本内容和样式的字符串。
需要注意的是,由于存在安全隐患,这种方式有一定的风险,请保证渲染的字符串是可靠的内容,或者对字符串进行安全过滤。
相关推荐
![vue](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)