Vuetify数据表将动态插槽与行/项插槽相结合

jjhzyzn0 于 2023-04-21 发布在 Vue.js

关注(0)|答案(2)|浏览(173)

我试图使一个可重用的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" }]

我希望能够使用2nd part使用item插槽或使用插槽数组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>

vue.js

来源：https://stackoverflow.com/questions/62511252/vuetify-data-table-combine-dynamic-slots-with-row-item-slots

2条答案

按热度按时间

41zrol4v1#

您正在尝试做的事情可以使用您希望的动态插槽的计算属性轻松解决：

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

所以现在你可以使用你的第一部分为你的插槽数组中的每个'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>

希望它有帮助，我来到这里与一个类似的问题，我解决了这种方式。

赞(0）回复(0）举报 2023-04-21

nr9pn0ug2#

它可能会帮助你。

<div id="app">
   <v-app id="inspire">
     <v-container>
    <v-row><v-btn @click="add">ADD</v-btn><v-btn 
          @click="remove">REMOVE</v-btn></v-row>
            <v-data-table
  :headers="headers"
  :items="desserts"  
>
  <template v-slot:body="props">
    <tr v-for="item in props.items">
      <td v-for="(header, index) in headers">
        <span v-if="index">{{ item.cols[index-1] }}</span>
        <span v-else>{{ item.name }}</span>
      </td>
    </tr>
  </template>
 </v-data-table>
      </v-container>
  </v-app>
</div>

codepen

赞(0）回复(0）举报 2023-04-21

我来回答

Vuetify数据表将动态插槽与行/项插槽相结合

2条答案

相关问题

热门标签

最新问答