Vue：为什么我的 html 表格列显示为单条直线？答案

【问题标题】：Vue: Why my html table columns are appearing as single straight line?Vue：为什么我的 html 表格列显示为单条直线？
【发布时间】：2020-11-09 10:21:54
【问题描述】：

我有一个由 3 个其他数组组成的数组。每个数组都是表格的一列。但是所有的行都出现在一条直线上。

我在这里使用 v-for 并在互联网上查找了一些完全相同的示例，但是我无法在 Vue 中修复它。

< script >
export default {
  data() {
    return {
      table: [
        ["Pass", "Pass", "Pass", "Pass", "Pass", "Pass"],
        ["Fail", "Fail", "Fail", "Fail", "Fail", "Fail"],
        ["NA", "NA", "NA", "NA", "NA", "NA"]
      ]
    }
  }
}
< /script >

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<template>
    <div>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th scope="col">A</th>
                    <th scope="col">B</th>
                    <th scope="col">C</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(row, i) in table" :key="i">
                     <td scope="row" v-for="(col, i) in row" :key="'A' + i">{{ col }} </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

我真的不知道为什么会这样。

更新：同一问题的嵌套对象示例

new Vue({
  el: '#app',
  template: '#main',
  data:
  {
   fptable: {"table": {"A": {0: "Pass", 1: "Pass", 2: "Pass", 3: "Pass", 4: "Pass", 5: "Pass"}, 
                               "B": {0: "Fail", 1: "Fail", 2: "Fail", 3: "Fail", 4: "Fail", 5: "Fail"}, 
                               "C": {0: "NA"  , 1: "NA"  , 2: "NA", 3: "NA"  , 4: "NA"  , 5: "NA"}}}
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>
<template id="main">
<div>
<body class="container mt-8" id="data" v-if="!table === undefined || !table.length == 0">
            <table class="table table-bordered">
                <thead >
                    <tr>
                        <th scope="col" v-for="(values, key) in fptable['table']" :key="key">{{ key }}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(values, key) in fptable['table']" :key="key">
                        <td v-for="(v, k) in values" :key="k">{{ values[k] }}</td>
                    </tr>
                </tbody>
            </table>
            
        </body>
        
    </div>
</template>

还是和图片一样的问题。

【问题讨论】：

标签： javascript arrays vue.js html-table

【解决方案1】：

关于嵌套对象解决方案。这也是可以解决的方法。

new Vue({
  el: '#app',
  template: '#main',
  data:
  {
   data: {"table": {"A": {0: "Pass", 1: "Pass", 2: "Pass", 3: "Pass", 4: "Pass", 5: "Pass"}, 
                               "B": {0: "Fail", 1: "Fail", 2: "Fail", 3: "Fail", 4: "Fail", 5: "Fail"}, 
                               "C": {0: "NA"  , 1: "NA"  , 2: "NA", 3: "NA"  , 4: "NA"  , 5: "NA"}}},
   table: []
  },
  
  methods: {
        checkTable(){
            this.table = []

            for (let key in this.data["table"]) {
                this.table.push(Object.values(this.data["table"][key]));
            }
  
        }
 }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>
<template id="main">
<div>
<body class="container mt-8" id="data" v-if="!table === undefined || !table.length == 0">
  <table class="table table-bordered">
      <thead >
          <tr>
              <th scope="col" v-for="(values, key) in data['table']" :key="key">{{ key }}</th>
          </tr>
      </thead>
      <tbody>
           <tr v-for="(row,rowIndex) in table[0]" :key="rowIndex">
              <td v-for="(col,colIndex) in table" :key="colIndex">{{ table[colIndex][rowIndex] }} </td>
          </tr> 
      </tbody>
  </table>
  <button @click="checkTable">View Table</button><br><br>
</body>
</div>
</template>

【讨论】：

【解决方案2】：

如果您需要一个包含 3 列的表格，您应该像这样编写您的模板：

new Vue({
  el: '#app',
  template: '#main',
  data:
  {
    fptable: 
    {
      "FailPass-table": 
      {
        "A": {0: "Pass", 1: "Pass", 2: "Pass", 3: "Pass", 4: "Pass", 5: "Pass"}, 
        "B": {0: "Fail", 1: "Fail", 2: "Fail", 3: "Fail", 4: "Fail", 5: "Fail"}, 
        "C": {0: "NA"  , 1: "NA"  , 2: "NA", 3: "NA"  , 4: "NA"  , 5: "NA"}
      }
    }
  },
computed:
{
  tableData()
  {
    return this.transpose(Object.values(this.fptable['FailPass-table']).map(function(col)
    {
      return Object.values(col);
    }));
  },
  tableHeader()
  {
    return Object.keys(this.fptable['FailPass-table']);
  }
},
methods:
{
  transpose(arr)
  {
    return arr[0].map(function(col,i)
    {
      return arr.map(function(row)
      {
        return row[i];
      });
    });
  }
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>
<template id="main">
    <div>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th v-for="(col,idx) in tableHeader" :key="idx">{{ col }}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(row,rowIndex) in tableData" :key="rowIndex">
                     <td v-for="(col,colIndex) in row" :key="colIndex">{{ col }} </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

【讨论】：

感谢您的回答。但是，我的 main.js 文件已经有一个 vue 实例。不创建另一个实例就无法解决。这个特定的代码是一个注册到 Home.vue 中的组件。入口点是 vue 实例所在的 main.js。
这个 sn-p 被用于 StackOverflow 上。当然，在您自己的项目中，您将使用单文件组件。关键是您的周期会遍历表格行 - 而您的数据包含表格列。因此，如果您不想先转置数据 - 您必须考虑到这种差异。
at：IVO：感谢您的更新。这是工作。但是后来我意识到，我正在做的项目实际上在制作这张桌子时还有另一个问题。实际上，我在对象中有对象，我必须动态地迭代它们。我的意思是标题和正文。没有硬编码。自从我试图在三周后实现这一点以来，表格已显示，但同样的问题与您在描述中发布的图片中看到的一样。如果您想在我在这里描述的这个问题上提供帮助。请告诉我。我会在这里更新必要的细节。
这个问题没有提到嵌套在其他对象中的对象——只有嵌套在另一个数组中的数组。但是在这两种情况下，如果您首先将嵌套结构转换为行数组，然后将每一行 - 转换为列（单元格）数组，则会更容易。然后您可以轻松使用 2 个 V-FOR - 一个用于 TR，一个用于 TD 标签。
嗨 IVO。我已经更新了这个问题。这次是嵌套对象