在Vuetify中如何轻松将Expansion Panel头部的图标移动到右侧

问题原因 #

Vuetify 的 v-expansion-panel-header 组件默认采用 Flex 布局，Flex 容器内的直接子元素设置 float 属性不会生效，这是CSS的固有规则，不属于组件异常。

可行解决方案 #

• 方案1：通过 margin-left: auto 实现右对齐
  Flex 布局下，给需要右置的元素设置margin-left: auto即可自动将元素推到容器最右侧，无需修改父容器属性，代码示例：

  <template>
    <v-expansion-panel-header>
      <span>面板标题</span>
      <v-icon class="right-icon">mdi-dots-vertical</v-icon>
    </v-expansion-panel-header>
  </template>
  
  <style scoped>
  .right-icon {
    margin-left: auto;
  }
  </style>
  

• 方案2：使用 Vuetify 内置工具类
  直接使用 Vuetify 自带的间距工具类 ml-auto，不需要额外编写自定义样式：

  <v-expansion-panel-header>
    <span>面板标题</span>
    <v-icon class="ml-auto">mdi-dots-vertical</v-icon>
  </v-expansion-panel-header>
  

• 方案3：自定义头部排版容器
  如果头部有多个操作元素需要排版，可以在头部内部套一层占满宽度的 Flex 容器，自主控制排版逻辑：

  <v-expansion-panel-header>
    <div class="d-flex w-100 align-center justify-between">
      <span>面板标题</span>
      <div class="d-flex gap-2">
        <v-icon>mdi-pencil</v-icon>
        <v-icon>mdi-delete</v-icon>
      </div>
    </div>
  </v-expansion-panel-header>
  

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