如何创建带有左侧标题和多行的表格 [英] How can I create table with headers on the left and multiple rows in it

问题描述

我有一个表格，其中可能有不同数量的列(标题)以及不同数量的数据.它是使用 v-for 填充的.示例代码将是这样的:

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

创建如下所示的表:

+-------------+---------+---------+|姓名 |中 |姓氏 |+-------------+---------+---------+|克里斯托弗 |阿什顿 |库彻 ||威廉|布拉德利 |皮特 ||托马斯 |肖恩 |康纳利 |+-------------+---------+---------+

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

+---------+-------------+|姓名 |克里斯托弗 ||中 |阿什顿 ||姓氏 |库彻 ||------- |----------- ||姓名 |威廉||中 |布拉德利 ||姓氏 |皮特 ||------ |----------- ||姓名 |托马斯 ||中 |肖恩 ||姓氏 |康纳利 |+---------+-------------+

JSON 格式的数据:

<代码>{列": {"0": "姓名","1": "中",2":姓氏"}}{数据": {姓名":[克里斯托弗"、威廉"、托马斯"]、中":[阿什顿"、布拉德利"、肖恩"]、姓氏":[库彻"、皮特"、康纳利"]}}

解决方案

假设您有以下数据:

data() { 返回 {名称: [{姓名":克里斯托弗"，中间":阿什顿"，姓氏":库彻"}，{ "Name": "William", "Middle": "Bradley", "Surname": "Pitt" },{姓名":托马斯"，中间":肖恩"，姓氏":康纳利"}，]}

这将是您的 HTML:

<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>

let template = `<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>`新的 Vue({el: "#app",模板，数据(){返回{名称: [{姓名":克里斯托弗"，中间":阿什顿"，姓氏":库彻"}，{ "Name": "William", "Middle": "Bradley", "Surname": "Pitt" },{姓名":托马斯"，中间":肖恩"，姓氏":康纳利"}，]}}});

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

I have a table which may have various number of columns (headers) and also various number of data in it. It is being populated using v-for. Sample code would be something like this:

     <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>

Which creates table that looks like this:

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

How can I convert this into table which would have header in first column and all the data in second:

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

Data in JSON:

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

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

解决方案

Assuming you have the following data:

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

This would be your 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>

这篇关于如何创建带有左侧标题和多行的表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！