Как получить доступ к определенному столбцу заголовка c в таблице данных Vuetify - PullRequest
Новая
       83

Как получить доступ к определенному столбцу заголовка c в таблице данных Vuetify

0 голосов
/ 16 июня 2020

Как я могу получить доступ к определенному столбцу заголовка c в таблице данных Vuetify, чтобы настроить его? Скажем, я хотел бы скрыть это, используя css имя класса.

В Vuetify docs предлагается использовать header.<name> для доступа. Но у меня нет четкого представления, как это сделать из-за отсутствия примера.

1 Ответ

1 голос
/ 16 июня 2020

Как упоминалось в официальных документах :

Вы можете использовать динамические c слоты header.<name> для настройки только определенных столбцов. <name> - это имя свойства значения в соответствующем элементе заголовка, отправляемом в заголовки.

Вы можете сделать: 

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    class="elevation-1"
  >
    <template v-slot:header.name="{ header }">
      {{ header.text.toUpperCase() }}
    </template>
  </v-data-table>
</template>

<script>
  export default {
    data: () => ({
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [
        ...
      ],
    }),
  }
</script>

Например, <template v-slot:header.<name>="{ header }"> дает вам доступ к соответствующему элементу в headers config { text: 'Calories', value: 'calories' },, где вы можете использовать text и value, чтобы настроить их, например: 

<template v-slot:header.name="{ header }">
      <i>{{ header.text.toUpperCase() }}</i>
    </template

Если вы хотите настроить строки, отметьте это answer

...