Question

如何获取v-for以与以下html相同的格式显示表数据：

<tr>
    <th scope="col">Name</th>
    <th scope="col">Price</th>
    <th scope="col">Product ID</th>
    <th></th>
</tr>

当前，我正在使用以下vue v-for代码（如下），但它正在将表头（th）一个添加到另一个下面。我希望表格标题并排显示。

<tr v-for="(column, index) in schema" :key="index">
    <th scope="col">{{column}}</th>
</tr>

Answer 1

您只需要在要重复的元素上放置 v-for ，而不是其父元素。

For循环应放在<< strong> th > << strong> / th >

<tr>
    <th v-for="(column, index) in schema" :key="index">{{column}}</th>
</tr>

以下是用于列表渲染的官方Vue文档：https://vuejs.org/v2/guide/list.html

Answer 2

分别绑定网格标题和数据。

 <template>
 <table>
   <thead>
   <tr>
     <th v-for="(header,index) in gridHeader" :key="index">
      {{header.displayName}}
     </th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(data, index) in gridData" :key="index" >
      <td>
      {{data.name}}
      </td>
      <td>{{data.age}}
      </td>
      <td>{{data.place}}
      </td>
    </tr>
  </tbody>
  </table>              
</template>

<script lang="ts">
import Vue from 'vue';    
export default class HelloWorld extends Vue {
  private gridHeader: object[] = [
        {name: 'Name', displayName: 'Name'},
        {name: 'Age', displayName: 'Age'},
        {name: 'Place', displayName: 'Place'}
    ];
  private gridData: any =[{name:'Tony',age:'31',place:'India'},
    {name:'Linju',age:'26',place:'India'},
    {name:'Nysa',age:'12',place:'India'}];
};
</script>
<style scoped>
</style>

VueJS：V-用于不按要求显示

2 个答案: