Vue v-data-table中仅当confirmed字段为false时显示编辑按钮

需求说明 #

• 现有展示用户休假申请的Vuetify数据表格，要求仅当单条休假记录的confirmed字段值为false时，操作列的编辑（mdi-pencil图标）按钮可见
• 若休假申请已确认（confirmed为true），则隐藏对应行的编辑按钮
• 表格效果参考：
  
• 之前实现时出现异常：要么所有休假记录都不显示编辑按钮，要么所有记录都显示编辑按钮，无法按单条记录的confirmed字段值独立控制显隐

原有问题代码 #

模板部分 #

<template>
<v-card>
    <v-data-table :items="vacations" :items-per-page="5" :headers="headers">
        <template v-slot:[`item.action`]="{ item }">
            <v-icon
                small
                class="mr-2"
                @click="editVacation(item)"
                color="primary"
            >
                mdi-pencil
            </v-icon>
            <v-icon
                v-if="isAdmin"
                small
                class="mr-2"
                @click="deleteVacation(item)"
                color="red"
            >
                mdi-delete
            </v-icon>
            <v-icon
                v-if="isAdmin"
                small
                class="mr-2"
                @click="confirmVacation(item)"
                color="green"
            >
                mdi-check
            </v-icon>
        </template>
    </v-data-table>
</v-card>
</template>

脚本部分 #

props: {
    vacations: {
        type: Array,
        required: false,
        defaultValue: () => []
    }
},
data() {
    return {
        showCreateOrEditModal: false,
        headers: [
            {
                text: 'ID',
                value: 'id',
                sortable: false
            },
            {
                text: 'User first name',
                value: 'user.firstName',
                sortable: false
            },
            {
                text: 'User last name',
                value: 'user.lastName',
                sortable: false
            },
            {
                text: 'Start date',
                value: 'startDate',
                sortable: false
            },
            {
                text: 'End date',
                value: 'endDate',
                sortable: false
            },
            {
                text: 'Confirmed',
                value: 'confirmed',
                sortable: false
            },
            { text: 'Actions', value: 'action', sortable: false }
        ]
    };
},
methods: {
    editVacation(vacation) {
        this.$emit('edit-vacation', vacation);
    },

    deleteVacation(vacation) {
        this.$emit('delete-vacation', vacation);
    },

    confirmVacation(vacation) {
        this.$emit('confirm-vacation', vacation);
    }
},
computed: {
    ...mapGetters({ isAdmin: 'isAdmin' })
}
</script>

问题根因 #

• 计算属性属于组件级全局状态，无法读取当前渲染行的独立数据，用它做判断必然导致所有行显隐状态一致
• 编辑图标未绑定针对当前行confirmed字段的行级判断条件

正确实现方案 #

插槽作用域已经解构出了当前行的item对象，可以直接访问该行所有字段，不需要额外编写计算属性，直接给编辑图标加上行级v-if判断即可。

修改后的模板代码 #

仅需给mdi-pencil对应的编辑图标新增判断条件，脚本部分无需改动：

<template>
<v-card>
    <v-data-table :items="vacations" :items-per-page="5" :headers="headers">
        <template v-slot:[`item.action`]="{ item }">
            <!-- 新增行级判断：仅当前记录未确认时显示编辑按钮 -->
            <v-icon
                v-if="!item.confirmed"
                small
                class="mr-2"
                @click="editVacation(item)"
                color="primary"
            >
                mdi-pencil
            </v-icon>
            <v-icon
                v-if="isAdmin"
                small
                class="mr-2"
                @click="deleteVacation(item)"
                color="red"
            >
                mdi-delete
            </v-icon>
            <v-icon
                v-if="isAdmin"
                small
                class="mr-2"
                @click="confirmVacation(item)"
                color="green"
            >
                mdi-check
            </v-icon>
        </template>
    </v-data-table>
</v-card>
</template>

如果业务要求仅管理员可编辑未确认的休假申请，可将判断条件调整为v-if="isAdmin && !item.confirmed"，按需修改即可。

内容的提问来源于stack exchange，提问作者Daniel Kołban