标签：comment vue detail comments prop 获取数据 score 数组 商品质量

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

标签：comment,vue,detail,comments,prop,获取数据,score,数组,商品质量
来源： https://blog.csdn.net/weixin_45237107/article/details/121892755

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。