抱着猫睡觉的鱼_ 2021-10-12 10:11 采纳率: 51.7%
浏览 72
已结题

vue 表格数据渲染格式问题。

数据格式如下

let data = [
    {
        "message": "",
        "id": "909c0e3f-75e4-47ab-b1a6-8fffc4f948c3",
        "productname": "雪碧",
        "productcode": "00034",
        "barcode": "",
        "category": "e2ead656-443b-4e6d-b5c2-257687a6a22d",
        "categoryName": "水泥",
        "brand": "3ca06784-de9c-400a-b7b0-826c231bfeaa",
        "brandName": "Apple",
        "spectemplate": "312e36e4-a74d-464c-b165-c3fc03dab03e",
        "spectemplateName": "颜色",
        "measureunit": "f4d9b00e-4f42-4fc8-93a4-79d7820965b1",
        "measureunitName": "分米",
        "listprice": 0,
        "isrecommend": "1",
        "creator": "",
        "lastModifier": "",
        "createdTime": "2021-10-11 14:11:58",
        "lastModifiedTime": "2021-10-11 14:11:58",
        "rightList": [
            {
                "id": "c1f0f07f-5bad-4f31-b9d7-220eca6a11ec",
                "parentId": "909c0e3f-75e4-47ab-b1a6-8fffc4f948c3",
                "attributeName1": "大小1",
                "attributeValue1": "小",
                "attributeName2": "颜色",
                "attributeValue2": "白色",
                "skuCode": "3100",
                "skuName": "饮料1",
                "price": 11,
                "isShelf": "上架",
                "uniqueCategoryKey": "1121"
            },
            {
                "id": "18f0125b-74eb-4ca8-84c1-85381328aeca",
                "parentId": "909c0e3f-75e4-47ab-b1a6-8fffc4f948c3",
                "attributeName1": "大小1",
                "attributeValue1": "小",
                "attributeName2": "颜色",
                "attributeValue2": "红色",
                "skuCode": "3101",
                "skuName": "饮料2",
                "price": 12,
                "isShelf": "上架",
                "uniqueCategoryKey": "1122"
            }
        ],
        "checkList": [
            "{\"id\":\"c1f0f07f-5bad-4f31-b9d7-220eca6a11ec\",\"parentId\":\"909c0e3f-75e4-47ab-b1a6-8fffc4f948c3\",\"attributeName1\":\"大小1\",\"attributeValue1\":\"\",\"attributeName2\":\"颜色\",\"attributeValue2\":\"白色\",\"skuCode\":\"3100\",\"skuName\":\"饮料1\",\"price\":11,\"isShelf\":\"上架\",\"uniqueCategoryKey\":\"1121\"}",
            "{\"id\":\"18f0125b-74eb-4ca8-84c1-85381328aeca\",\"parentId\":\"909c0e3f-75e4-47ab-b1a6-8fffc4f948c3\",\"attributeName1\":\"大小1\",\"attributeValue1\":\"\",\"attributeName2\":\"颜色\",\"attributeValue2\":\"红色\",\"skuCode\":\"3101\",\"skuName\":\"饮料2\",\"price\":12,\"isShelf\":\"上架\",\"uniqueCategoryKey\":\"1122\"}"
        ]
    }
]

需要渲染的table,分别取外层的productcode和checkList数组下的skuCode,应该如何能取到,求详细解释

<el-table
                :data="copyLeftData"
                border
                type="index"
                style="width: 100%;margin-top:20px"
                highlight-current-row
                class="tb-edit"
                :default-sort="{ prop: 'date', order: 'descending' }"
              >
                <el-table-column label="商品编号" sortable>
                  <template slot-scope="scope">
                    {{ scope.row.productcode }}
                    <br />
                    <span style="color: #84878c" v-for="(item,index) in copyLeftData.checkList" :key="index">
                      {{ item.skuCode }}
                    </span>
                  </template>
                </el-table-column>

                <el-table-column label="商品名称" sortable>
                  <template slot-scope="scope">
                    {{ scope.row.productname }}
                    <br />
                     <span style="color: #84878c" v-for="(item,index) in copyLeftData.checkList" :key="index">
                      {{ item.skuName }}
                    </span>
                    <!-- <span style="color: #84878c">
                      {{ scope.row.skuName }}
                    </span> -->
                  </template>
                </el-table-column>

                <el-table-column label="备注">
                  <template slot-scope="scope">{{ scope.row.remark }}</template>
                </el-table-column>
              </el-table>


  • 写回答

2条回答 默认 最新

  • 你好!机器人 2021-10-12 10:13
    关注

    copyLeftData.checkList改成scope.row.checkList

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 10月20日
  • 已采纳回答 10月12日
  • 创建了问题 10月12日