"[{"key":"规格","value":"爱奇艺黄金会员周卡"},{"key":"规格","value":"爱奇艺黄金会员周卡2"}]"前端返回的数据,在vbenadmin封装的表格中展示成规格:爱奇艺黄金会员周卡并且换行
时间: 2023-09-18 20:13:50 浏览: 42
可以使用自定义渲染函数来实现这个需求。首先,在vbenadmin的表格配置中,找到需要展示这个数据的列,添加一个 `customRender` 属性,指向自定义渲染函数。例如:
```js
{
title: '规格',
dataIndex: 'specs',
customRender: (text) => {
const specs = JSON.parse(text)
return specs.map(spec => `规格:${spec.value}<br>`).join('')
},
},
```
这里假设数据的字段名为 `specs`,并且是一个 JSON 字符串。在自定义渲染函数中,首先将字符串解析为一个数组,然后遍历数组,将每个元素的 `value` 属性拼接成一个字符串,并在后面添加 `<br>` 标签表示换行,最后使用 `join()` 方法将所有的字符串合并成一个。这样,就可以将原本以数组形式保存的规格数据展示成一行并且换行的形式了。
相关问题
[{"key":"规格","value":"爱奇艺黄金会员周卡"},{"key":"规格","value":"爱奇艺黄金会员周卡2"}]格式循环展示出
你可以使用 for 循环遍历列表,然后针对每个字典输出其中的 "value" 值。可以像这样实现:
```python
lst = [{"key":"规格","value":"爱奇艺黄金会员周卡"},{"key":"规格","value":"爱奇艺黄金会员周卡2"}]
for item in lst:
print(item["value"])
```
输出结果为:
```
爱奇艺黄金会员周卡
爱奇艺黄金会员周卡2
```
你也可以将每个 "value" 值存储到一个新的列表中,以便进一步处理。
"[{"key":"规格","value":"爱奇艺黄金会员周卡"},{"key":"规格","value":"爱奇艺黄金会员周卡2"}]"后端返回的字段数据,前端在vbenadmin封装的表格中展示成规格:爱奇艺黄金会员周卡并且换行
在vbenadmin中展示成规格:爱奇艺黄金会员周卡并且换行,可以通过自定义表格列的render函数来实现。具体实现步骤如下:
1. 在表格列配置中添加一个自定义列,例如:
```javascript
{
title: '规格',
dataIndex: 'specs',
customRender: (text, record) => {
return (
<div>
{text.map(item => (
<div>{`${item.key}: ${item.value}`}</div>
))}
</div>
)
}
}
```
2. 在render函数中,将规格数据进行遍历,生成对应的HTML元素,并添加换行样式。
```javascript
{
title: '规格',
dataIndex: 'specs',
customRender: (text, record) => {
return (
<div>
{text.map(item => (
<div>{`${item.key}: ${item.value}`}</div>
))}
<style jsx>{`
div :global(div) {
margin-bottom: 8px;
}
`}</style>
</div>
)
}
}
```
在以上代码中,`text`参数为后端返回的规格数据,是一个包含多个键值对的数组。我们通过`map`函数将每个键值对转换成一个`<div>`元素,并通过`${item.key}: ${item.value}`的方式显示出来。在最后,我们添加了一段CSS样式,将每个`<div>`元素之间添加了8px的下边距,实现了换行的效果。
这样就可以将后端返回的规格数据在vbenadmin中展示成规格:爱奇艺黄金会员周卡并且换行了。