Vue.js v-data-table在从Vuetify 1.5更新时忽略模板=>；2.

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

{{props.item.name}
{{props.item.carries}
{{props.item.fat}

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

 <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) {

        },
    },
};

导出默认值{
数据（）{
返回{
搜索：“，
标题：[
{
文字：“甜点（100克），
对齐：“左”，
可排序：false，
值：“名称”，
},
{文本：'卡路里'，值：'卡路里'}，
{text:'Fat（g'），value:'Fat'}，
{text:'Carbs（g）'，value:'Carbs'}，
{text:'Protein（g'），value:'Protein'}，
{文本：'Iron（%）'，值：'Iron'}，
{text:'Action'，value:'Action'}，
],
甜点：[
{
id:1，
名称：“冷冻酸奶”，
卡路里：159，
脂肪：6.0，
碳水化合物：24，
蛋白质：4.0，
铁：1%，
},
{
id:2，
名称：“冷冻酸奶”，
卡路里：159，
脂肪：6.0，
碳水化合物：24，
蛋白质：4.0，
铁：1%，
},
],
};
}方法：{
编辑（id）{
},
删除（id）{
},
},
};

---

在vuetify v2中，项目槽已重命名，因此，为了减少更改，您只需将原始代码中的

项目

修改为

项目

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

---

您好，我假设它们都显示出来了，因为您在“headers”变量中设置了它们？事实上，除非您的每行自定义比上面的示例更多，否则您几乎可以舍弃整个模板标记，只处理headers变量，甚至可以在其中设置对齐方式。比如：{text:'carries'，value:'carries'，align:'end'}，不幸的是我需要更多的定制。我希望能够添加按钮，使用{func（props.item.carries）}等设置特定行的格式。我对进一步定制更感兴趣。我希望能够添加按钮，用{func（props.item.carries）}等设置特定行的格式。非常感谢！我会尽快尝试这一点，这正是我想要的。谢谢被接受为答案这个答案救了我，让我补充一下，在V2之前，我只在内部使用过。现在，我需要先进去。否则，我的表中不能有多行，它会将数据拉伸到表视图之外，这很难看。

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