如何解决Vue中Vuetify v-treeview组件无法实现横向滚动的问题

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

当前超出宽度的元素内容会被自动省略，想要实现treeview的横向滚动效果，可按以下步骤修改：

• 首先给v-treeview添加自定义类名，移除原有无效的overflow-x-auto属性
• 新增自定义CSS覆盖v-treeview的默认截断样式

修改后的组件代码：

<v-treeview 
  v-model="tree" 
  :open="initiallyOpen" 
  :items="items" 
  activatable 
  item-key="name" 
  open-on-click
  class="tree-scroll-x"
>
  <!-- 原有插槽逻辑保持不变 -->
  <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>

配套CSS样式：

/* 允许节点内容不换行、不省略 */
.tree-scroll-x .v-treeview-node__content {
  overflow: visible;
}
.tree-scroll-x .v-treeview-node__label {
  white-space: nowrap;
  text-overflow: unset;
  overflow: visible;
}
/* 外层容器开启横向滚动 */
.tree-scroll-x {
  overflow-x: auto;
  width: 100%;
}

如果修改后滚动仍被外层导航抽屉截断，可以给v-navigation-drawer也添加overflow-x: auto样式即可。

内容的提问来源于stack exchange，提问作者moi