在Vuetify中如何将删除按钮移至展开按钮附近？

要让删除按钮靠近展开按钮，核心是利用Vuetify v-expansion-panel-header 提供的**actions插槽**——这个插槽的内容会被渲染在header的右侧区域，紧邻展开/收起图标，刚好满足需求。

修改后的代码 #

<v-expansion-panel-header>
  {{ vehicle.VIN }}
  <!-- 若check图标需要留在VIN旁，保留在此；若要和删除按钮一起放右侧，移到actions插槽内 -->
  <template v-slot:actions>
    <v-icon v-if="type == 'saved'" color="teal">mdi-check</v-icon>
    <v-btn
      text
      v-if="type == 'saved'"
      color="red"
      @click="remove(index, type)"
      class="mx-1" <!-- 可选：添加间距类调整元素间距离 -->
    >
      DELETE
    </v-btn>
  </template>
</v-expansion-panel-header>

原理说明 #

v-expansion-panel-header 默认将主内容（如示例中的VIN文本）布局在左侧，而actions插槽专门用于放置头部右侧的操作元素，这些元素会自动和展开图标排列在一起，无需额外复杂的布局控制。如果需要微调元素间距，可使用Vuetify的间距类（如mx-1表示左右边距）进行调整。

内容的提问来源于stack exchange，提问作者code-8