Блог

Главная - Вопросы по программированию - Горизонтальная прокрутка Vuetify treeview

Горизонтальная прокрутка Vuetify treeview

#vue.js #vuetify.js

#vue.js #vuetify.js

Вопрос:

У меня проблемы с получением горизонтальной прокрутки для работы с v-treeview в Vue:

введите описание изображения здесь

 <div id="app">
  <v-app id="inspire">
    <v-navigation-drawer v-model="drawer" app width="150">
      <v-treeview v-model="tree" :open="initiallyOpen" :items="items" activatable item-key="name" open-on-click overflow-x-auto>
        <template v-slot:prepend="{ item, open }">
          <v-icon v-if="!item.file">
            {{ open ? 'mdi-folder-open' : 'mdi-folder' }}
          </v-icon>
          <v-icon v-else>
            {{ files[item.file] }}
          </v-icon>
        </template>
      </v-treeview>
    </v-navigation-drawer>
    <v-main>
      Objects...
    </v-main>
  </v-app>
</div>

CodePen: https://codepen.io/moi90/pen/mdBVMXX

Слишком широкие элементы сокращаются. Вместо этого я хочу, чтобы treeview можно было прокручивать по горизонтали. Как мне этого добиться?

Ответ №1:

Вы можете переопределить некоторые классы стилей

Добавьте приведенный ниже код в CSS в примере CodePen

 .v-treeview-node__label {
  overflow: initial;
  text-overflow: initial;
}

.v-navigation-drawer__content {
  overflow-x: auto
}

Комментарии:

1. Спасибо! Я соответствующим образом обновил CodePen. Однако остается одна проблема: затенение выбранного узла не заполняет всю ширину. (Может быть, потому, что соответствующий .v-treeview-node__content является гибким?)

2. Измените ширину для этого класса .v-treeview { width: max-content; }

3. Хотя другой ответ тоже может сработать, это то, что я использую сейчас, поэтому я приму этот ответ. Еще раз спасибо!

Ответ №2:

Это сработало для меня:

 <v-flex xs12 style="overflow:auto">
   <v-treeview style="width: max-content">
   ...
Метки: