如何在 Vuetify 的表格中显示嵌套列表

Posted 2023-02-22

【中文标题】如何在 Vuetify 的表格中显示嵌套列表

【英文标题】：How to display nested lists in a table in Vuetify

【发布时间】：2019-10-03 05:13:37

【问题描述】：

我是 Vuetify 的新手，我有一个列表，其中包含其他三个列表，我正在尝试使用表格打印出每个列表中的信息。这是我的代码：

这是表格的代码：

 <tr
   v-for="items in rows">
     <td v-for="things in items">things</td>
 </tr>  

这是我的清单：

rows: [
    [
      'Nick',
      '19',
      'male'
    ],
    [
      'Bill',
      '23',
      'male'
    ],
    [
      'Kathy',
      '22',
      'female'
    ],
  ]

我试过了，但它打印了三个列表三次，但我的目标是让一个列表中的元素显示在一行中。先感谢您。第一次发问题，请指出我使用的任何非正式风格！

【参考方案1】：

看看我做的这个sn-p：

https://codesandbox.io/s/elastic-agnesi-1hl1e

编辑

html代码：

<div id="app">
        <table>
            <tr v-for="item in rows">
                <td v-for=" thing in item "> thing </td>
            </tr>
        </table>
    </div>

js代码：

var app = new Vue(
  el: "#app",
  data: function() 
    return 
      rows: [
        ["Nick", "19", "male"],
        ["Bill", "23", "male"],
        ["Kathy", "22", "female"]
      ],
      greetings: "Hello, I'm Joe"
    ;
  
);

【讨论】：

感谢您的帮助，但我正在使用 Vue SFC ......这是我的错，我没有提到这一点。

我觉得用不用SFC没关系，思路还是一样的。