таблица данных событий vuetify и рендеринг не подходит для выпадающего списка строк на странице - PullRequest
Новая
       7

таблица данных событий vuetify и рендеринг не подходит для выпадающего списка строк на странице

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

Я столкнулся с проблемой с выпадающим рендерингом «строк на страницу» и событиями для него. Когда я нажимаю на v-меню нижнего колонтитула таблицы, выпадающее меню отображается за пределами экрана из-за того, что CSS свойство 'top' неправильно рассчитывается с помощью таблицы данных vuetify js.

Drop down

В раскрывающемся списке «строк на страницу» 3 значения [5, 10, 15], 5 и 10 видны, но 15 находится за пределами экрана. в таблице нет нижнего отступа или поля, а высота также равна 100%.

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

Я использую vuejs -2.5.13 с vuetify-1.1.13.

Ответы [ 2 ]

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

Я думаю, что проблема может быть связана с нижним колонтитулом (я вижу какой-то черный блок), для которого значение z-index может быть выше. Из-за чего раскрывающийся список идет ниже этого нижнего колонтитула.

Измените значение z-index блока на 0 и проверьте, работает ли он нормально.

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

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

<v-data-table
      :headers="headers"
      :items="desserts"
      :sort-by="['calories', 'fat']"
      :sort-desc="[false, true]"
      multi-sort
      class="elevation-1"
    ></v-data-table>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          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: 200,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',

        },
      ],
    }
  },
})
...