我正在尝试制作一个可重复使用的vuetify数据表格。如果需要的话,我希望有能力传递动态插槽或项目插槽,并且两者都应该可以工作。以下是代码:
<v-data-table
:headers="headers"
:items="items"
:dense="dense"
:hide-default-header="hideDefaultHeader"
:loading="loading"
:options.sync="settings"
:items-per-page="itemsPerPage"
:server-items-length="itemLength"
@click:row="handleClick"
:height="height"
>
<-- 1st part-->
<template v-for="field in slots" v-slot:[field.field]="{ item }">
<slot :name="field.field" :item="item"></slot>
</template>
<-- 2nd part -->
<template v-slot:item="{item}">
<slot name="item" v-bind="item"></slot>
</template>
</v-data-table>
这样就创建了一个叫做DataTable
的组件,然后我可以像这样使用它:
<DataTable
v-if="tabs == n"
:items="items"
:loading="loading"
:headers="headers"
:options="serverOptions"
:slots="slots"
:total="toatl"
@updateOptions="updateOptions($event, n)"
>
我也有一个像这样的插槽数组
slots: [{ field: "item.CREATOR" }, { field: "item.BODY" }]
我希望能够使用
第二部分
来使用item
插槽或使用在插槽数组中定义的特定列插槽第一部分
。目前,动态插槽只有在我注释掉第二部分
时才能够使用。这是我当前对每个部分进行插槽的方式。<template v-slot:item.CREATOR="{ item }">
<strong>{{item.FIRSTNAME}} {{item.LASTNAME}}</strong>
</template>
2nd part:
<template v-slot:item="item">
<tr>
<td>{{item.MESSAGESTATUS}}</td>
<td>sdsd</td>
<td>sfsf</td>
</tr>
</template>