ant design vue的table组件,从后台接收包含文本内容的span样式的字符串数据,怎么处理列,写个简单代码
时间: 2024-04-29 17:25:01 浏览: 13
?
可以通过在 table 的 columns 属性中使用自定义的 render 方法来处理包含文本内容的 span 样式的字符串数据。具体代码如下:
```
<template>
<a-table :columns="columns" :dataSource="dataSource">
</a-table>
</template>
<script>
export default {
data() {
return {
columns: [
{
title: '内容',
dataIndex: 'content',
render: text => {
const html = `<span style="color: red">${text}</span>`
return {
dangerouslySetInnerHTML: { __html: html }
}
}
}
],
dataSource: [
{ content: '<span>这是内容1</span>' },
{ content: '<span>这是内容2</span>' },
{ content: '<span>这是内容3</span>' },
]
}
}
}
</script>
```
这里使用了 render 方法将原始数据中包含的 span 样式解析出来,并通过 Vue 的 v-html 指令渲染到页面上。当然,为了安全起见,也可以使用 DOMPurify 等第三方库对渲染 HTML 进行 XSS 防护。
相关推荐
![vue](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](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)