Question

我有一个有效的v数据表，并且能够使用模板自定义显示的行。一旦更新到vuetify 2.0（下面的代码笔链接），该代码将不再起作用。我假设vuetify发生了一些变化，但是我不确定是什么。

<v-data-table
    :headers="headers"
    :items="desserts"
    class="elevation-1">
  <template v-slot:items="props">
    <td>{{ props.item.name }}</td>
    <td class="text-xs-right">{{ props.item.calories }}</td>
    <td class="text-xs-right">{{ props.item.fat }}</td>
  </template>
</v-data-table>

在提供的示例中，我只希望显示前两列（如v1.5中所示），但是仍然显示具有所有列的默认v-data-table视图。请帮忙！

Answer 1

 <v-data-table
        :headers="headers"
        :items="desserts"
        :search="search"
        show-group-by
    >
        <template v-slot:item.action="{ item }">
            <v-icon
                small
                class="mr-2"
                color="blue"
                @click="edit(item)"
            >
                edit
            </v-icon>
            <v-icon
                small
                color="red"
                @click="delete(item.id)"
            >
                delete
            </v-icon>
        </template>
    </v-data-table>

在您的脚本中

<script>
export default {
    data() {
        return {
            search: "",
            headers: [
                {
                    text: 'Dessert (100g serving)',
                    align: 'left',
                    sortable: false,
                    value: 'name',
                },
                {text: 'Calories', value: 'calories'},
                {text: 'Fat (g)', value: 'fat'},
                {text: 'Carbs (g)', value: 'carbs'},
                {text: 'Protein (g)', value: 'protein'},
                {text: 'Iron (%)', value: 'iron'},
                {text: 'Action', value: 'action'},
            ],
            desserts: [
                {
                    id: 1,
                    name: 'Frozen Yogurt',
                    calories: 159,
                    fat: 6.0,
                    carbs: 24,
                    protein: 4.0,
                    iron: '1%',
                },
                {
                    id: 2,
                    name: 'Frozen Yogurt',
                    calories: 159,
                    fat: 6.0,
                    carbs: 24,
                    protein: 4.0,
                    iron: '1%',
                },

            ],
        };
    }, methods: {
        edit(id) {

        },
        delete(id) {

        },
    },
};

Answer 2

在vuetify v2中，项目位置已重命名，因此，为了进行最小程度的更改，您只需要在原始代码中将items修改为item。

<template v-slot:item="props">

vuetify v2 release notes

从Vuetify 1.5更新时v-data-table忽略模板=> 2

2 个答案: