Vuetify treeview 水平滚动答案

【问题标题】：Vuetify treeview horizontal scrollVuetify treeview 水平滚动
【发布时间】：2022-01-11 15:09:05
【问题描述】：

我无法在 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

太宽的元素会被缩写。相反，我希望树视图可以水平滚动。我如何做到这一点？

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

你可以覆盖一些样式类

在 CodePen 示例中向 CSS 添加波纹管代码

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

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

【讨论】：

谢谢！我相应地更新了 CodePen。但是，仍然存在一个问题：选定节点的阴影不会填满整个宽度。（可能是因为对应的 .v-treeview-node__content 是灵活的？）
更改此类的宽度.v-treeview { width: max-content; }
虽然其他答案也可以，但这是我现在正在使用的，所以我会接受这个答案。再次感谢！

【解决方案2】：

这对我有用：

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

【讨论】：