0

I've created a BaseDataTable that uses a <v-data-table> with a couple of props setted by default:

<template>
 <div>
  <v-container fluid>
   <v-data-table
     dense
     <!-- other props -->
   ></v-data-table>
  </v-container>

  <!-- utilities -->

 </div>
</template>

When I tried it I found out I wasn't able to use:

<template #[`item.name`]="{ value }">
 <span>custom dessert name rendering {{ value }}</span>
</template>

I found on stackoverflow that I had to add these lines of code to my BaseDataTable component (stackoverflow link):

<template>
 <div>
  <v-container fluid>
   <v-data-table
     dense
     <!-- other props -->
   >
    <template 
      v-for="(_, name) in $scopedSlots"
      #[name]="slotData"
    >
      <slot 
        :name="name"
        v-bind="slotData"
      ></slot>
    </template>
   </v-data-table>
  </v-container>

  <!-- utilities -->

 </div>
</template>

Now let's say every time I have a #[item.name] I want a precise render, how can I achieve this result? I'll write some pseudo code to help you better understand my point:

<template>
 <div>
  <v-container fluid>
   <v-data-table
     dense
     <!-- other props -->
   >
    <template 
      v-for="(_, name) in $scopedSlots"
      #[name]="slotData"
    >
      <span v-if="name === 'item.name'">
       custom name rendering {{ name }}
      </span>
      <slot
        v-else 
        :name="name"
        v-bind="slotData"
      ></slot>
    </template>
   </v-data-table>
  </v-container>

  <!-- utilities -->

 </div>
</template>
PyKKe
  • 67
  • 7

1 Answers1

1

If all you want is to have some pre-configured props, instead of making a base data-table component. I would store my pre-config props as an object in a js file somewhere in my project, then I'd just import it and pass that object to the v-data-table with the v-bind property.

Kinda like what the correct answer did in this question: Add condition in vue attribute instead using v-if condition

cmfc31
  • 1,385
  • 2
  • 8
  • 9
  • Unluckly I really need a BaseDataTable component (I have shown a very basic example), so I need a more precise answer to my question. – PyKKe Jun 06 '22 at 07:19