时间戳

首页 > 解决方案 > 如何在 Vuetify 的表格中显示嵌套列表

vue.js - 如何在 Vuetify 的表格中显示嵌套列表

问题描述

我是 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'
    ],
  ]

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

标签： vue.jsvuetify.js

解决方案

看看我制作的这个片段：

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"
    };
  }
});

推荐阅读