ant design vue的table组件,从后台接收包含文本内容的span样式的字符串数据变量,怎么渲染列,写个简单代码
时间: 2024-05-11 12:15:06 浏览: 14
可以先将接收到的字符串数据变量中的span样式元素提取出来,然后使用Ant Design Vue的Table组件的customRender函数来渲染列。下面是一个简单的实现示例:
```vue
<template>
<a-table :columns="columns" :dataSource="data">
<template #content="text">
{{ text }}
</template>
</a-table>
</template>
<script>
export default {
data() {
return {
data: [
{ id: 1, content: "<span style='color:red'>红色文本</span>" },
{ id: 2, content: "<span style='color:blue'>蓝色文本</span>" },
],
columns: [
{
title: "编号",
dataIndex: "id",
},
{
title: "内容",
dataIndex: "content",
customRender: (text) => {
const div = document.createElement("div");
div.innerHTML = text;
const spans = div.getElementsByTagName("span");
for (let i = 0; i < spans.length; i++) {
div.removeChild(spans[i]);
}
return div.textContent;
},
},
],
};
},
}
</script>
```
在这个示例中,由于`content`字段中包含了`<span>`标签,所以在渲染列的时候需要先提取出来其中的文本内容。在`customRender`函数中,先创建一个div元素,将`text`中的HTML代码赋给`div`的`innerHTML`属性,然后用`getElementsByTagName`方法获取所有的`<span>`标签,最后遍历并删除所有的`<span>`标签元素,得到的就是纯文本内容,用`textContent`属性获取即可。
相关推荐
![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)