在使用vue和element编写前端页面,渲染列表数据时,table表格属性中的prop获取到的数据是一个数组
后端返回的json数据如下:
{
"id": 1,
"score": 90,
"detail": "商品质量好",
"sid": 1,
"code": "100100A",
"name": "北京xxx科技有限公司",
"result": "优",
"comments": [
{
"detail": "商品质量好",
"score": 90
},
{
"detail": "好",
"score": 77
}
]
},
{
"id": 2,
"score": 59,
"detail": "商品质量差",
"sid": 2,
"code": "100200B",
"name": "江西xxx有限公司",
"result": "中",
"comments": [
{
"detail": "商品质量差",
"score": 59
}
]
}
前端页面定义如下(非数组属性代码已省略):
<el-table-column
label="评价详情"
width="580"
prop="comments"
>
<template slot-scope="scope">
<span>
{{comment.detail}}({{comment.score}}分)
<br/>
</span>
</template>
</el-table-column>
评价详情列中需将一个公司的评价数组循环渲染展示,采用以下两种解决办法:
1.直接循环comments数组
<el-table-column
label="评价详情"
width="580"
prop="comments"
>
<template slot-scope="scope">
<span v-for="(comment,index) in scope.row.comments" :key="index">
{{comment.detail}}({{comment.score}}分)
<br/>
</span>
</template>
</el-table-column>
2.使用ele官方的formatter方法来格式化渲染