使用Vue组件填充表格数据仅限Vue应用

如何解决使用Vue组件填充表格数据仅限Vue应用

我正在尝试在Vue中构建前端Web应用程序。在我的一个组件中，它呈现了一个表，而我试图使用子组件来填充某些表数据。子组件位于表主体中表行的for循环中。

ParentComponent.vue：

<table> 
 <thead>
  <tr>
   <th>Header 1</th>
   <th>Header 2</th> 
   <th>Header 3</th>
   <th>Header 4</th>
  </tr> 
 </thead>
 <tbody>
  <tr v-for="looping">
   <td>Data</td>  
   <ChildComponent/>
  </tr>
 </tbody>
</table>

ChildComponent.vue：

<span> 
 <td>Data1</td> 
 <td>Data2</td>  
 <td>Data3</td> 
</span>

我的问题是，当创建表时，组件中的所有数据都进入同一列。 有没有一种方法可以使表数据分布在整个表中，以使数据位于各自的列中？

编辑：上面提供的代码在模板标记内。

解决方法

首先定义ChildComponent，内容为for循环：

<template>
  <tr> 
    <td>{{ item.name }}</td> 
    <td>{{ item.age }}</td>  
  </tr>
</template>

<script>
export default {
  props: ["item"]
}
</script>

然后在父组件中写入虚假数据：

data() {
  return {
    list: [
      {
        name: "Jack",age: 32,},{
        name: "Rose",age: 21,{
        name: "Bob",age: 45,]
  }
},

导入子组件

<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },}
</script>

最后，您可以在父组件中编写循环：

<template>
  <table> 
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th> 
      </tr> 
    </thead>
    <tbody>
      <ChildComponent v-for="(item,index) in list" 
                      :key="index" 
                      :item="item" />
    </tbody>
  </table>
</template>