Поменять стиль тэга

141

20 августа 2021, 06:50

Хочу поменять стили для тэга vuetify v-data-table. Как мне обратиться к :headers="dataSecretsTableHeaders", если я хочу поменять стили только для dataSecretsTableHeaders в CSS?

<div class="table"> 
  <v-data-table :headers="dataSecretsTableHeaders" :items="dataSecrets" :items-per-page="7" class="table"> 
    <template v-slot:item.action="{ item }"> 
      <v-icon 
        small 
        class="mr-2" 
        @click="editItem(item)" 
      > 
        edit 
      </v-icon> 
      <v-icon 
        small 
        @click="deleteItem(item)" 
      > 
        delete 
      </v-icon> 
    </template> 
    <template v-slot:item.button="{ item }"> 
      <button 
        class='button-secondary' 
        @click="goTo(`/data-secrets/analytics/${item.id}`,item)" 
      > 
        View Analytics 
      </button> 
    </template> 
  </v-data-table> 
</div>

P.S. Не нужно писать , что стили задаются для тега , а не для атрибута. Внимательнее прочитайте вопрос =)

Answer 1

Необходимо просто проинспектировать код через консоль. Предположу, что вы не знали об этом. Вызывается комбинацией клавиш CTRL+SHIFT+J или F12 (Chrome). Выполнив команды вы увидите:

Видим, что :headers превращается в .v-data-table-header. Дописываем стиль.

new Vue({ 
  el: '#app', 
  vuetify: new Vuetify(), 
  data() { 
    return { 
      expand: false, 
      headers: [{ 
          text: 'Dessert (100g serving)', 
          align: 'left', 
          sortable: false, 
          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: [{ 
          name: 'Frozen Yogurt', 
          calories: 159, 
          fat: 6.0, 
          carbs: 24, 
          protein: 4.0, 
          iron: '1%' 
        }, 
        { 
          name: 'Ice cream sandwich', 
          calories: 237, 
          fat: 9.0, 
          carbs: 37, 
          protein: 4.3, 
          iron: '1%' 
        }, 
      ] 
    } 
  } 
});

.v-data-table-header{ 
  user-select: none; 
  background: lightgrey; 
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"> 
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"> 
<div id="app"> 
  <template> 
    <v-data-table 
      :headers="headers" 
      :items="desserts" 
      :items-per-page="5" 
      class="elevation-1" 
    ></v-data-table> 
  </template> 
</div> 
 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.*/dist/vuetify.min.js"></script>

:headers - динамический атрибут.