Vuetify 树视图水平滚动

Question

我在使用 Vue 中的 v-treeview 进行水平滚动时遇到问题：

<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>

代码笔：https://codepen.io/moi90/pen/mdBVMXX

太宽的元素被缩写。相反，我希望树视图可以水平滚动。我该如何实现？

Answer 1

您可以覆盖某些样式类

在 CodePen 示例

中的 CSS 添加以下代码

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

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

Answer 2

这对我有用：

<v-flex xs12 style="overflow:auto">
   <v-treeview style="width: max-content">
   ...

Vuetify 树视图水平滚动

Vuetify treeview horizontal scroll

vue.js

vuetify.js