Как отключить эффект наведения таблиц данных Vuetify? - PullRequest
Новая
       3

Как отключить эффект наведения таблиц данных Vuetify?

0 голосов
/ 02 марта 2020

Таблицы данных из Vuetify по умолчанию имеют эффект наведения. Я обнаружил, что этот класс CSS применяется, когда я проверяю строку таблицы, 

.theme--light.v-data-table tbody tr:hover:not(.v-data-table__expanded__content) {
    background: #eee;
}

Так что кажется, что это добавляет цвет фона к строке таблицы. Но когда я добавляю эту область действия CSS к компоненту Vuetify, 

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    :disable-sort="true"
    hide-default-footer
    :item-key="itemKey"
  >
    <template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="scope">
      <slot :name="slot" v-bind="scope" />
    </template>
  </v-data-table>
</template>

<script>
export default {
  name: "BaseDataTable",
  props: {
    headers: Array,
    items: Array,
    itemKey: {
      type: String,
      default: "id"
    }
  }
};
</script>

<style scoped>
.theme--light.v-data-table
  tbody
  tr:hover:not(.v-data-table__expanded__content) {
  background: #fff;
}
</style>

Он буквально ничего не делает с новым CSS, который я добавил. Даже когда я добавляю !important после фона. Может кто-нибудь сказать мне, почему новые правила CSS не работают или даже не применяются? Потому что я даже не вижу их в консоли.

1 Ответ

0 голосов
/ 02 марта 2020

Я забыл использовать глубокие селекторы: 

<style scoped>
.v-data-table
  /deep/
  tbody
  /deep/
  tr:hover:not(.v-data-table__expanded__content) {
  background: #ffffff !important;
}
</style>

Теперь стиль применяется ко всем таблицам данных. Если у кого-то есть дальнейшие объяснения, не стесняйтесь ответить на этот вопрос.

...