Question

我有一个这样的可视化数据表

$scripts[0] = "ABC"
$scripts[1] = "DEF"
$scripts[2] = "GHI"

相反，我要使用v-for加载这些td元素

我尝试了

def formFunction(event): root.withdraw() # hides your main window top = Toplevel() # New window Opens top.title('New Shoot') top.attributes('-zoomed', True) # Form will default into full screen name = Label(text='Enter name: ') name.grid(row=1, column=1, sticky='w') entry_name = Entry(top) entry_name.grid(row=2, column=1, sticky='w') submit_button = Button(top, text='New Shoot') submit_button.bind('<Button-1>', insertNewName) # Button -1 is left click submit_button.grid(row=2, columnspan=2, sticky='e') exit_button = Button(top, text='Exit/Close', command=top.destroy) exit_button.grid(row=3, column=1) root.iconfiy() # brings your main window back

我该如何通过vuetify做到这一点。我的vuetify版本也是1.5.5

这是我的密码笔 https://codepen.io/pathum-kalhan/pen/ZEzMEQG

Answer 1

尝试以下模板：

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-data-table :items="items" :headers="headers" :search="search">
            <template slot="items" slot-scope="props">
              <template v-for"column in headers">
                <td>{{ column.text }}</td>
              </template>
            </template>
          </v-data-table>
      </v-container>
    </v-content>
  </v-app>
</div>

Answer 2

<template slot="items" slot-scope="props">
   <td v-for="(prop, key) of props.item" :key="key" :v-text="prop" />
</template>

...有效（目前）。
请注意使用for...of代替for...in。

但是，这将为您商品的每个属性输出<td>。这意味着，如果您的任何一项获得附加属性（拥有或继承），它将破坏表的布局。

一种更安全的方法是使用辅助传播方法来增强输出对象的结构：

methods: {
  spreadItem(item) {
    const { id, make, year } = item;
    return { id, make, year };
  }
}

，并且在模板中：

<template slot="items" slot-scope="props">
   <td v-for="(prop, key) of spreadItem(props.item)" 
       :key="key"
       :v-text="prop" />
</template>

已更新pen。当一些项目具有附加道具时，这不会添加额外的单元格（除非您将它们添加到spreadItem方法和headers中，当然，在这种情况下，它们将显示为附加列）

Answer 3

您可以像下面这样在train_path = 'Digital_Mamo/OPTIMAM' valid_path = 'Digital_Mamo/InBreast' test_path = 'Digital_Mamo/OPTIMAM/Test_malignat_big' valid_batches = ImageDataGenerator().flow_from_directory(valid_path, target_size=(224, 224), classes=['Benign', 'Malignant'], batch_size=9) test_batches = ImageDataGenerator().flow_from_directory(test_path, target_size=(224, 224), classes=['Benign', 'Malignant'], batch_size=14) train_batches = datagen.flow_from_directory( train_path, target_size=(224, 224), batch_size=10, classes=['Benign','Malignant']) vgg16_model= load_model('Fetched_VGG.h5') model= Sequential() for layer in vgg16_model.layers[:-1]: model.add(layer) for layer in model.layers: layer.trainable = False model.add(Dense(2, activation='softmax', name='predictions')) model.compile(Adam(lr=.0001), loss='categorical_crossentropy', metrics=['accuracy']) hist = model.fit_generator(train_batches, steps_per_epoch=10, validation_data=valid_batches, validation_steps=10, epochs=5, verbose=2) scoreSeg = model.evaluate_generator(test_batches) predictions = model.predict_generator(test_batches, steps=10, verbose=0)中使用Object.keys()

v-for

请检查以下代码段：

<td v-for="(key,index) in Object.keys(props.item)" :key="index">{{props.item[key]}}</td>

new Vue({
  el: '#app',
  data: () => ({
    items: [{id:1,make:'bmw',year:2019},{id:2,make:'benz',year:2019}],
      headers: [
        { text: 'Id', value: 'id' },

        { text: 'Make', value: 'make' },
        { text: 'Year', value: 'year' }],
    search:""
        
  })
})

td {
  border-bottom: 1px solid #ccc;
}

Vuetify动态加载数据表行

3 个答案: