这是我的组件(我们称之为 BaseTable):
<v-card>
<v-card-title>
{{ title }}
<v-spacer></v-spacer>
<v-text-field
:value="value"
@input="$emit('input', $event)"
append-icon="mdi-magnify"
label="Search"
single-line
hide-details
></v-text-field>
</v-card-title>
<v-data-table
:search="value"
:headers="headers"
:items="items"
:loading="loading"
:loading-text="loadingText"
>
<slot></slot> <!--Will pass something here -->
</v-data-table>
</v-card>
</template>
Run Code Online (Sandbox Code Playgroud)
然后我想通过操作列中的按钮重用 BaseTable:
<BaseTable
:headers="headers"
:items="items"
:loading="loading"
loadingText="Getting items... Please wait"
title="Transfer Request Processing"
v-model.lazy="search"
>
<template v-slot:item.actions="{ item }">
<v-btn block color="warning" outlined @click="delete(item)">
<v-icon left class="mr-2">mdi-icon</v-icon>DELETE
</v-btn>
</template>
</BaseTable>
Run Code Online (Sandbox Code Playgroud)
数据以正确的标题显示,但“删除”按钮却没有。我尝试在组件本身上使用模板(效果很好),但我不希望那样。非常感谢您的帮助。