Vue 表，包含多个带有子对象的数组的列表

Posted 2023-02-22

【中文标题】Vue 表，包含多个带有子对象的数组的列表

【英文标题】：Vue table, list with multiple arrays with sub objects

【发布时间】：2018-03-21 18:16:23

【问题描述】：

我想问一下。可以像这样简单地用 Object 渲染表格..

list 
  Array[1] = [
    Object[0] = 
      name: "Hello world"
    
  ],
  Array[2] = [
    Object[0] = 
      name: "Hello world"
    ,
    Object[1] = 
      name: "Hello world"
    
  ]

有点像这样..

<tr v-for="(subrows, header) in list"> header </tr>
<tr v-for="subrow in subrows"> subrow <tr/>

问题是我不能简单地创建带有标题行和子行的表..

如果有人能帮我解决这个问题，我将不胜感激。

【问题讨论】：

您能否编辑您的问题，以便清楚list 中的数据项如何对应subrows 和header？

【参考方案1】：

如果你有像arr1:[name:"test11",age:11],arr2:[name:"test22",age:22],arr3:[name:"test33",age:33] 这样的对象，试试下面的代码

var vm = new Vue(
  el: '#vue-instance',
  data: 
    rows:arr1:[name:"test11",age:11],arr2:[name:"test22",age:22],arr3:[name:"test33",age:33]
  
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<div id="vue-instance">
  <table border="1">
    <tr><th>Data for</th><th>Name</th><th>Age</th></tr>
    <tr v-for="(index,row) in rows"><td>index</td><td>row[0].name</td><td>row[1].age</td></tr>
  </table>
</div>

如果您的对象不同，请共享对象的 2-3 个元素样本的确切对象

【讨论】：

但是我有一个列表，其中每个数组都是标题，并且在数组中每个对象都是行：/ arr1=[name:1,name:2].arr2=[name:3 ] 在 laravel 中它看起来像这样： forach (items as x => y) $x->name foreach (y as subitem) $subitem->.. endforeach endforeach跨度>

感谢帮助，但如何获取 arr1,arr2.. 作为表头和对象作为行

@nrkz : 在第一列也添加了键名

谢谢，但是可以将此键添加为新的 tr 之类的标头吗？

是的，它可能但不是一个好方法，因为arr1,arr2 是动态行而不是列。