当然有办法解决啦！Vuetify针对长列表的滚动和性能优化提供了两种实用方案，你可以根据自己的数据量来选择：

方案1：给列表添加固定高度与滚动样式 #

如果你的数据量在几百条左右，最简单直接的方式就是给<v-list>设置一个固定的最大高度，并开启垂直滚动。你可以用内联样式，或者更贴合Vuetify风格的工具类来实现：

修改后的代码示例（内联样式） #

<v-list style="max-height: 500px; overflow-y: auto;">
  <v-list-tile v-for="user in users" :key="user.id" avatar @click="">
    <v-list-tile-content>
      <v-list-tile-title v-text="user.name"></v-list-tile-title>
    </v-list-tile-content>
    <v-btn icon>
      <v-icon>edit</v-icon>
    </v-btn>
  </v-list-tile>
</v-list>

用Vuetify工具类实现 #

<v-list class="overflow-y-auto" style="max-height: 500px;">
  <!-- 原列表内容保持不变 -->
</v-list>

这里的max-height可以根据你的页面布局调整成合适的数值，比如100vh让列表占满整个视口高度，或者其他符合需求的固定值。

方案2：虚拟滚动（适合上千条以上大数据量） #

如果你的数据量特别大（比如几千甚至上万条），上面的方案虽然能实现滚动，但渲染所有DOM元素会拖慢页面性能。这时候可以用Vuetify的v-virtual-scroll组件——它只会渲染当前可见区域的列表项，动态替换滚动时的内容，大幅提升性能。

修改后的代码示例 #

<v-virtual-scroll :items="users" height="500px" item-height="48">
  <template v-slot:item="{ item }">
    <v-list-tile :key="item.id" avatar @click="">
      <v-list-tile-content>
        <v-list-tile-title v-text="item.name"></v-list-tile-title>
      </v-list-tile-content>
      <v-btn icon>
        <v-icon>edit</v-icon>
      </v-btn>
    </v-list-tile>
  </template>
</v-virtual-scroll>

参数说明： #

• height：设置虚拟滚动容器的固定高度
• item-height：每个列表项的固定高度（单位为px，默认值48和v-list-tile的默认高度一致，你可以根据自己的列表项样式调整）
• 插槽item：用来渲染单个列表项，item就是循环中的单个user对象

这样处理后，不管数据量多大，页面上只会加载可见的几个列表项，滚动时自动更新内容，性能表现会好很多。

内容的提问来源于stack exchange，提问作者Zbyszek Kisły