Значение линейного индикатора выполнения Vuetify в строке таблицы данных перекрывает фиксированные заголовки - PullRequest
Новая
       11

Значение линейного индикатора выполнения Vuetify в строке таблицы данных перекрывает фиксированные заголовки

0 голосов
/ 13 июля 2020

  • Версия Vuetify: все

  • Vue Версия: 2.6.11

  • Шаги для воспроизведения

    • Значение прокрутки и линейного прогресса будет перекрывать FAT

  • Ожидаемое поведение

    • Значение линейного прогресса не должно перекрывать заголовки

Ссылка для воспроизведения https://codepen.io/bnping/pen/mdVjqoz?editors=1010

     <v-data-table
    fixed-header
    height="70vh"
    :headers="headers"
    :items="desserts"
    :search="search"
  >
        <template v-slot:item.fat="{ item }">
    <v-progress-linear
      :background-opacity="0.3"
      :buffer-value="100"
      :height="25"
      :width="150"
      :rounded="true"
      :value="item.fat"
    >
    <div>{{ item.fat }}</div>
    </v-progress-linear>
  </template>
    
    
  </v-data-table>

1 Ответ

1 голос
/ 13 июля 2020

Это происходит потому, что ваш фиксированный заголовок и элементы имеют одинаковый z-index: 2

В вашем css коде 

    .v-data-table--fixed-header 
{
    ...
    position: sticky;
    z-index: 2;
}

    .v-progress-linear__content 
{
...
positon: absolute;
z-index: 2;
}

Как вы можете видите, у вас один и тот же z-индекс, но разные позиции обоих компонентов.

Вам следует попытаться изменить эти css классы и изменить их z-индекс (добавив '! important' для перезаписи других классов), например что: 

   <style>
  .v-progress-linear__content {
    z-index:1;
  }
</style>
...