vue.js - Vuetify数据表结合了动态插槽和行/项目插槽

Question

我正在尝试制作可重用的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使用 2nd part插槽，或者使用插槽数组 1st part中定义的特定列插槽。现在，除非我注释掉 2nd part，否则动态插槽。这是我目前如何放置每个零件的方式
第一部分:

<template v-slot:item.CREATOR="{ item }">
    <strong>{{item.FIRSTNAME}} {{item.LASTNAME}}</strong>
</template>

第二部分:

<template v-slot:item="item">
    <tr>
        <td>{{item.MESSAGESTATUS}}</td>
        <td>sdsd</td>
        <td>sfsf</td>
    </tr>
</template>

Answer 1

我认为您可以使用所需的动态广告位的计算属性轻松解决您要执行的操作:

 computed: {
   creatorSlots: function () {
    //Filters the slots of type CREATOR
    return this.slots.filter(slot => slot.field==='CREATOR');
   }
 }

所以现在您可以对插槽阵列上的每个“创建者”插槽使用“第一部分”:

<template v-for="(slot,i) in creatorSlots" v-slot:[`item.${slot.field}`]="{ item }">
    <strong :key="i">{{item.FIRSTNAME}} {{item.LASTNAME}}</strong>
</template>

如果您还有其他插槽需要以其他方式处理，则只需为其他插槽使用另一个计算属性，然后重复该过程即可。

 computed: {
   bodySlots: function () {
    //Filters the slots of type BODY
    return this.slots.filter(slot => slot.field==='BODY');
   }
 }

<template v-for="(slot,i) in bodySlots" v-slot:[`item.${slot.field}`]="{ item }">
    <tr>
        <td>{{item.MESSAGESTATUS}}</td>
        <td>sdsd</td>
        <td>sfsf</td>
    </tr>
</template>

希望对您有所帮助，我来到这里时遇到了类似的问题，并以此方式解决了。