Question

我有这样的后端回复：

{
  "responseData": [
    {
      "count": 1,
      "startTime": "11.01.2017 12:25",
      "endTime": "11.01.2017 12:26",
      "code": "ABC"
    },
    {
      "count": 1,
      "startTime": "11.01.2017 13:50",
      "endTime": "11.01.2017 13:51",
      "code": "ABC"
    },
    {
      "count": 1,
      "startTime": "11.01.2017 14:05",
      "endTime": "11.01.2017 14:06",
      "code": "ABC"
    },
    {
      "count": 1,
      "startTime": "11.01.2017 14:35",
      "endTime": "11.01.2017 14:36",
      "code": "ABC"
    },
    {
      "count": 1,
      "startTime": "11.01.2017 14:45",
      "endTime": "11.01.2017 14:46",
      "code": "ABC"
    },
    {
      "count": 1,
      "startTime": "11.01.2017 15:35",
      "endTime": "11.01.2017 15:36",
      "code": "ABC"
    }
  ]
}

我将在数组中有更多数据。该表取决于用户的输入。我希望我的桌子像

<md-table>
   <md-table-header>
       <md-table-row id="header" v-for="value in responseData">
           <md-table-cell>{{ value.key }}</md-table-cell> // for each key in response one table cell
        </md-table-row>
    </md-table-header>

    <md-table-body>
      <md-table-row  v-for="(row, index) in responseData" :key="index">
         <md-table-cell>{{response.value}}</md-table-cell> //for each key table cell value
      </md-table-row>
    </md-table-body>
</md-table>

这样的东西，但我希望它充满活力。 http://codepen.io/zupa10/pen/OpJJEM 正如我所说，有一次我会在数组中有4个东西，比如count，startTime，endTIme和code，有时候我会有这个以及另外5个东西，也许是全新的东西。任何建议我该怎么办？

更新：

我用vue.js网格组件做了这个，它对我来说效果很好。这是链接https://vuejs.org/v2/examples/grid-component.html。

Answer 1

这很难理解。我确定有更好的方法可以做到这一点，但我在json数据中添加了其他信息。

此示例呈现多个表，否则，它应该适合您。

示例输出如下所示：

<table (v-for loop on tables)>
<th  (this is for table name, since I have multiple tables)> output == Member Company </th>
<td (for heading)> output == Company Name</td><td (for value)> output == Company ABC</td>
</table>

这是vue.js中的循环结构：

<table v-for="(section_item, section_key) in results" class="table table-condensed" v-bind:id="section_item.section_id" data-id="{{$member->id}}">
  <thead>
      <tr>
         <th colspan="3">{{section_item.section_name}}</th>
      </tr>
  </thead>
  <tbody>
  <tr v-for="(field_item, field_key) in section_item.field_data">
   <td>{{field_item.name}}</td>
   <td>
      <a class="edit" v-bind:id="field_item.id">{{field_item.value}}</a>
   </td>
</tr>
</tbody>    
</table>

"results": [
   {
    "section_name": "Member Company",
    "section_id": "company_info",
    "field_data": {
        "0-company_name": {
            "name": "Company Name",
            "id": "company_info-company_name",
            "type": "string",
            "required": "1",
            "value": "Company ABC"
        },
        "1-member_type": {
            "name": "Member Type",
            "id": "company_info-member_type",
            "type": "string",
            "required": "1",
            "value": "Affiliate"
        },
            ...

获取table-head vue.js的表头和值的键

1 个答案: