Vuetify v-data-table单元格内v-img图片仅部分可见，如何让头像完整显示

出现该问题是因为Vuetify的v-data-table默认设置了固定行高和单元格内边距，无法适配高度超过默认行高的头像内容，可通过以下方案解决：

• 方案1：覆盖默认单元格样式（推荐局部修改）
  给表格添加自定义类名避免全局污染，再用深度选择器修改单元格样式，示例如下：

<!-- 给表格添加自定义类名 -->
<v-data-table 
  class="avatar-table"
  :headers="tableHeaders" 
  :items="streamers"
>
  <template v-slot:item.avatar="{ item }">
    <v-img max-height="100" aspect-ratio="1" :src="item.avatar"/>
  </template>
</v-data-table>

<style scoped>
/* 深度选择器修改当前表格的单元格样式 */
:deep(.avatar-table td) {
  height: auto !important;
  /* 调整上下内边距适配头像尺寸 */
  padding: 12px 16px;
}
</style>

• 方案2：插槽内添加容器强制撑开行高
  直接在头像插槽外层添加指定最小高度的容器，无需修改全局/组件样式：

<v-data-table :headers="tableHeaders" :items="streamers">
  <template v-slot:item.avatar="{ item }">
    <div style="min-height: 100px; display: flex; align-items: center;">
      <v-img max-height="100" aspect-ratio="1" :src="item.avatar"/>
    </div>
  </template>
</v-data-table>

两种方案都可以实现完整显示头像的效果，你可以根据自身业务需求选择。

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