Vuetify.js v-data-table 动态模板 [英] Vuetify.js v-data-table dynamic template

问题描述

在我的 Vue.js 项目中，我有一个 v-data-table.

In my Vue.js project I have a v-data-table.

如果单元格内容为 true 我想用绿色的 check_circle 图标替换.

If cell content is true I would like to replace with the green check_circle icon.

为什么此代码不起作用?

Why this code isn't working?

<template v-for="header in headers" v-slot:item[header.value]="{ item }">
    <v-icon v-if="item[header.value]" color="green">check_circle</v-icon>
</template>

现在的表格是:

<小时>编辑 1

<v-data-table
    :loading="loading"
    :headers="headers"
    :items="items"
    :items-per-page="items_per_page"
    :search="search"
    no-data-text="Non ci sono elementi"
    no-results-text="Non ci sono elementi filtrati"
    loading-text="Caricamento in corso..."
    :footer-props="footerProps"
    class="elevation-1">


    <template v-for="header in headers" v-slot:item[header.value]="{ item }">
        <v-icon v-if="item[header.value]" color="green">check_circle</v-icon>
        <v-icon v-else color="red">cancel</v-icon>
    </template>


    <template v-slot:item.actions="{ item }">
        <v-icon
            small
            class="mr-2"
            @click="editItem(item)"
        >mdi-pencil</v-icon>
        <v-icon
            small
            @click="deleteItem(item)"
        >mdi-delete</v-icon>
    </template>

    <template v-slot:top>
        <v-toolbar flat color="white">
            <v-spacer></v-spacer>
            <v-dialog v-model="dialog" max-width="500px">
                <template v-slot:activator="{ on }">
                    <v-btn color="primary" dark class="mb-2" @click="newItem" v-on="on">New Item</v-btn>
                </template>
                <v-card>
                    <v-card-title>
                        <span class="headline">{{ formTitle }}</span>
                    </v-card-title>

                    <v-card-text>
                        <v-container>
                            <!-- modifica elemento -->
                            <v-row v-if="editedIndex > -1">
                                <v-col v-for="(key,i) in keys_visible" :key="key" v-show="headers_visible[i].visible == true" cols="12" sm="6" md="4">
                                    <v-text-field v-if="headers_visible[i].type == 'varchar'" v-model="editedItem[key]" :label="headers_visible[i].text" :disabled="!headers_visible[i].editable"></v-text-field>
                                    <v-switch v-else-if="headers_visible[i].type == 'bit'" v-model="editedItem[key]" :label="headers_visible[i].text"></v-switch>
                                </v-col>
                            </v-row>
                        </v-container>
                    </v-card-text>

                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="blue darken-1" text @click="close">Cancel</v-btn>
                        <v-btn color="blue darken-1" text @click="save">Save</v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>
        </v-toolbar>
    </template>

    <template v-slot:no-data>
        <v-btn color="primary" @click="initialize">Reset</v-btn>
    </template>

</v-data-table>

headers 是这样的:

headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Actions', value: 'actions', sortable: false },
      ]

一个item是这样的:

item: {
        cleaned: true,
        name: '',
        usable: 0,
        ...
      }

推荐答案

要为所有需要使用 body 插槽的项目动态迭代标题...

To iterate the headers dynamically for all items you'd need to use the body slot...

   <template v-slot:body="{ items }">
      <tr v-for="idx in items">
        <td v-for="header in headers" class="text-left font-weight-black">
          <v-icon v-if="idx[header.value]" color="green">check_circle</v-icon>
        </td>
      </tr>
   </template>

演示:https://codeply.com/p/W0vKEyRGRO

另见:Vuetify Datatable - 启用内容编辑在所有列上

这篇关于Vuetify.js v-data-table 动态模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！