Início / coding / Perguntas / 77082361
Accepted
tunafish24
Asked: 2023-09-11 22:08:47 +0800 CST

Como adicionar uma dica de ferramenta ao cabeçalho da tabela de dados no vuetify 3?

  • 772

Como posso adicionar uma dica de ferramenta ao cabeçalho da tabela de dados do Vuetify 3 sem precisar reimplementar a funcionalidade de classificação?

Houve uma resposta para uma pergunta semelhante há alguns anos, mas é para o Vuetify 2: https://stackoverflow.com/a/58718975/934257

vuetify.js

1 respostas

  1. Best Answer

    Funciona da mesma forma que na resposta vinculada, exceto que o header.${string}slot é chamado column.${string}agora, e o activatorslot da dica de ferramenta agora recebe um propsvalor em vez de on:

    <v-data-table
  :headers="headers" 
  :items="items"
>
  <template
    v-for="h in headers" 
    v-slot:[`column.${h.key}`]="{ column }"
  >
    <v-tooltip>
      <template v-slot:activator="{ props }">
        <span v-bind="props">{{ h.title }}</span>
      </template>
      <span>{{ h.title }}</span>
    </v-tooltip>
  </template>
</v-data-table>

    Aqui está em um playground

    • 1

relate perguntas