Add title to table row

Asked

Viewed 20 times

0

Conditionally sometimes we need to put one title in a table row to inform the user about what is happening, some status, etc.

Using vuetify, I would like to add this title in some lines conditionally

Example if any data was false add the title

My table is like this:

<template>
   <v-row>
    <v-data-table  :headers="headers" :items="lista" :items-per-page="10" class="elevation-1" />
   </v-row>
</template>

Script

  export default {
       data: ()=>({
           headers: [
                { text: 'ID', value: 'id_client', align: 'center', class: 'primary white--text', width: 80, sortable: false},
                { text: 'NOME', value: 'NOME', align: 'center', class: 'primary white--text', width: 100},
                { text: 'NASCIMENTO', value: 'dt_nascimento', align: 'center', class: 'primary white--text', width: 180 
              ],
          lista: [
              {id_client: 1, nome: 'Carlos', '04/08/1985', status: true},
              {id_client: 2, nome: 'Bruno', '04/08/1990', status: true},
              {id_client: 3, nome: 'Brito', '04/08/1995', status: false},
           ]
       })
    }

I managed to do so

<v-data-table
            :headers="headers"
            :items="lista"
            :items-per-page="10"
            class="elevation-1">
            <template v-slot:item="props">
                <v-tooltip bottom>
                    <template v-slot:activator="{ on, attrs }">
                        <tr :class="{
                        'red--text': props.item.error,
                        'blue--text':  props.item.update
                        }" 
                        v-on="on"
                        v-bind="attrs">
                            <td class="text-xs-left">{{ props.item.line }}</td>
                            <td class="text-xs-left">{{ meses[ props.item.month - 1] ? meses[ props.item.month - 1].name : ''}}</td>
                            <td class="text-xs-left">{{ props.item.year }}</td>
                       </tr>
                </template>
                <span>teste</span>
            </v-tooltip>
  </v-data-table>

Adding the v-tooltio, but I would like to add conditionally without using the html

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.