关于vue+element的table表格prop获取数据是数组的问题

在使用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方法来格式化渲染