如何创建带有左侧标题和多行的表格

Question

我有一个表，其中可能有不同数量的列（标题）以及不同数量的数据。它正在使用v-for 填充。示例代码将是这样的：

     <div class="table-responsive">
        <table class="table">
            <thead><tr>
                <th v-for="header in table_headers">
                    <span>@{{header}}</span>
                </th>
            </tr></thead>
            <tbody>
                <tr v-for="body in table_body">
                    <td>
                       @{{body}}    
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

这会创建如下所示的表：

+-------------+---------+---------+
|    Name     | Middle  | Surname |
+-------------+---------+---------+
| Christopher | Ashton  | Kutcher |
| William     | Bradley | Pitt    |
| Thomas      | Sean    | Connery |
+-------------+---------+---------+

如何将其转换为第一列有标题，第二列有所有数据的表格：

+---------+-------------+
| Name    | Christopher |
| Middle  | Ashton      |
| Surname | Kutcher     |
| ------- | ----------- |
| Name    | William     |
| Middle  | Bradley     |
| Surname | Pitt        |
| ------  | ----------- |
| Name    | Thomas      |
| Middle  | Sean        |
| Surname | Connery     |
+---------+-------------+

JSON 格式的数据：

{
  "columns": {
    "0": "Name",
    "1": "Middle",
    "2": "Surname"
  }
}

{
  "data": {
    "Name": ["Christopher", "William", "Thomas"],
    "Middle": ["Ashton", "Bradley", "Sean"],
    "Surname": ["Kutcher", "Pitt", "Connery"]
  }
}

Answer 1

假设你有以下数据：

data() { return {
  names: [ 
    { "Name": "Christopher", "Middle": "Ashton", "Surname": "Kutcher" },
    { "Name": "William", "Middle": "Bradley", "Surname": "Pitt" },
    { "Name": "Thomas", "Middle": "Sean", "Surname": "Connery" },
  ]
}

这将是您的 HTML：

<table>
  <tr v-for="name in names">
    <td>
      <div v-for="key in Object.keys(name)">{{ key }}</div>
    </td>
    <td>
      <div v-for="value in Object.values(name)">{{ value }}</div>
    </td>
  </tr>
</table>

let template = `<table>
  <tr v-for="name in names">
    <td>
      <div v-for="key in Object.keys(name)">{{ key }}</div>
    </td>
    <td>
      <div v-for="value in Object.values(name)">{{ value }}</div>
    </td>
  </tr>
</table>`

new Vue({
  el: "#app",
  template,
  data() { return {
      names: [ 
        { "Name": "Christopher", "Middle": "Ashton", "Surname": "Kutcher" },
        { "Name": "William", "Middle": "Bradley", "Surname": "Pitt" },
        { "Name": "Thomas", "Middle": "Sean", "Surname": "Connery" },
      ]
    }
  }
});

<script src="https://vuejs.org/js/vue.min.js"></script>

<div id="app"></div>