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

281

12 августа 2021, 22:50

уважаемые форумчане . Хочу поменять стили для тэга vuetify v-data-table . Как мне этого добиться через css?

 <v-data-table
        :headers="dataSecretsTableHeaders"
        :items="dataSecrets"
        :items-per-page="5"
        class="table"
      >
        <template v-slot:item.action="{ item }">
          <v-icon
            small
            class="mr-2"
            @click="editItem(item)"
          >
            edit
          </v-icon></v-data-table>

Answer 1

Вы указали class="table".

Обращение в CSS будет примерно такое .table .v-table %selector%

Например покрасить tbody таблицы

.table .v-table tbody {
    background-color: red;
}

Таким образом можно обращаться к любому элементу внутри таблицы th, td, tr и т.д.

Так же внутри <template></template> можно задавать отдельные классы и обращаться к ним по такому же принципу.

Обращение через указанный класс нужно чтоб обратиться к конкретной таблице, если в одном компоненте используется много таблиц, если же таблица всего одна, то можно отбросить .table и писать просто .v-table tbody

P.S. Для "правильной" работы желательно чтоб в template были <tr>и <td>, иначе использовать v-data-table особого смысла нету