单击带有模板行的 v-data-table 中的行

Question

When I added template rows (so that they have special formatting based on condition):

  <v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
    @click:row="clickedHandle"
  >
    <template v-slot:item="props">
      <tr v-if="props.item.name.includes('Fro')">
        <td>{{ props.item.name }}</td>
        <td v-for="itemx in myheaders">{{ toThousands(props.item[itemx]) }}</td>
      </tr>
      <tr v-else>
        <td v-for="itemx in props.item">{{ itemx }}</td>
      </tr>
    </template>
  </v-data-table>

The function that is supposed to be called on row click clickedHandle does not fire up at all. Why is that so?

Here is the example where you can check this behaviour: https://codesandbox.io/s/vuetify-playground-forked-lro4w?file=/src/layout.vue

The table does not seem to react on row click at all.

clickedHandle(value) {
  console.log(value);
},

clickedHandle should log some value on row click.

Answer 1

Customize each cell individually as they do in the v-data-table row customization docs , not the whole row. You can use a v-for to dynamically target the cell slots you want (in conjunction with your myheaders array):

<template v-for="header in myheaders" v-slot:[`item.${header}`]="props">
  <template v-if="props.item.name.includes('Fro')">
    {{ toThousands(props.item[header]) }}
  </template>
  <template v-else>
    {{ props.item[header] }}
  </template>
</template>

You could avoid this slot and filter complexity by preparing your data ahead of time in a computed.

Here is an updated CodeSandbox

Answer 2

try with this code:

<v-data-table
      :headers="headers"
      :items="desserts"
      hide-actions
      class="elevation-1"
    >
     <template slot="items" slot-scope="myprops">
  <tr v-if="myprops.item.name.includes('Fro')">
 ...
  </tr>
  <tr v-else>
    <td v-for="itemx in props.item">{{ itemx }}</td>
  </tr>
</template>
    </v-data-table>