鍍金池/ 問答/HTML/ vue element table 如何渲染 多層數(shù)據(jù)

vue element table 如何渲染 多層數(shù)據(jù)

問題描述

現(xiàn)有一個板塊 第一層渲染 id name description，展開顯示不同的productVersions，table prop 和 scope 都無法獲取 productVersions 里面的數(shù)據(jù)

才疏學(xué)淺 試過很多方法都不得要領(lǐng)

相關(guān)代碼

{
"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
}

求助各位 有什么好辦法可以實現(xiàn)嗎

回答
編輯回答
風(fēng)畔

這樣子試試
<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>

2017年5月2日 00:00