Vuetify选择框全选区域图标显示异常求助

当前全选区域的布局结构不符合Vuetify列表项的标准规范，导致复选框与文字排版错乱，无法实现预期的行内对齐效果。

修复步骤 #

修改SelectAll.vue中prepend-item插槽内的代码，调整为Vuetify列表项的正确结构：

<template v-slot:prepend-item>
  <v-list-item ripple @click="toggleAll">
    <v-list-item-action>
      <v-checkbox
        :indeterminate="isIndeterminate"
        :model-value="isAllSelected"
        hide-details
        class="ma-0"
      />
    </v-list-item-action>
    <v-list-item-title>全选</v-list-item-title>
  </v-list-item>
  <v-divider class="mt-2"></v-divider>
</template>

核心调整 #

• 将复选框放入v-list-item-action插槽，实现左对齐布局
• 用v-list-item-title承载“全选”文字，与复选框自然对齐
• 移除原代码中多余的v-list-item-content嵌套，消除布局层级冲突

调整后，全选区域的样式就会和预期一致，符合Vuetify组件的布局规范。

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