vue element table 如何渲染 多层数据

Question

问题描述

现有一个板块 第一层渲染 id name description，展开显示不同的productVersions，table prop 和 scope 都无法获取 productVersions 里面的数据

才疏学浅 试过很多方法都不得要领

相关代码

{
"data": {

"description": "string",
"id": 0,
"name": "string",
"productVersions": [
  {
    "changedBy": "string",
    "changedOn": "2018-08-19T04:49:30.453Z",
    "createdBy": "string",
    "createdOn": "2018-08-19T04:49:30.453Z",
    "description": "string",
    "feature": {},
    "id": 0,
    "prdVersion": 0,
    "price": 0,
    "priceCurr": "string",
    "productId": 0,
    "richDesc": "string",
    "status": 0,
    "validFrom": "2018-08-19T04:49:30.454Z",
    "validTo": "2018-08-19T04:49:30.454Z",
    "versionName": "string"
  }，
  {
    "changedBy": "string",
    "changedOn": "2018-08-19T04:49:30.453Z",
    "createdBy": "string",
    "createdOn": "2018-08-19T04:49:30.453Z",
    "description": "string",
    "feature": {},
    "id": 0,
    "prdVersion": 0,
    "price": 0,
    "priceCurr": "string",
    "productId": 0,
    "richDesc": "string",
    "status": 0,
    "validFrom": "2018-08-19T04:49:30.454Z",
    "validTo": "2018-08-19T04:49:30.454Z",
    "versionName": "string"
  }
]

},
"msg": {

"code": "string",
"detail": "string",
"level": "INFO",
"title": "string"

},
"status": 0,
"success": true
}

求助各位 有什么好办法可以实现吗

Answer 1

这样子试试
<div v-for="(data,index) in data">
<el-table

:data="data.productVersions"
height="250"
border
style="width: 100%">
<el-table-column
  prop="date"
  label="日期"
  width="180">
</el-table-column>
<el-table-column
  prop="name"
  label="姓名"
  width="180">
</el-table-column>
<el-table-column
  prop="address"
  label="地址">
</el-table-column>

</el-table>
</div>

Answer 2

prop 属性虽然是一个字符串, 但是支持 prop: 'productVersions.date' 多层访问

<el-table-column
        prop="productVersions.date"
        label="日期"
/>