elementUI中折叠面板箭头图标位置调整到最左边

在Element UI中，折叠面板（Collapse）组件的箭头图标默认是在标题内容的最右边。如果你想要调整这个图标的位置，使它出现在最左边，你可以通过自定义样式来实现。

以下是一个简单的例子，展示如何通过CSS样式来调整折叠面板箭头的位置：

<template>
  <el-collapse class="adjusted-arrow-position">
    <el-collapse-item title="标题一">
      <div>内容一</div>
    </el-collapse-item>
    <el-collapse-item title="标题二">
      <div>内容二</div>
    </el-collapse-item>
  </el-collapse>
</template>
 
<style>
/* 调整箭头位置到最左边 */
.adjusted-arrow-position .el-collapse-item__header {
  justify-content: flex-start;
}
 
/* 如果箭头后还有其他内容，可以通过这个类来调整它们的位置 */
.adjusted-arrow-position .el-collapse-item__arrow {
  margin-right: 0;
  order: -1; /* 将箭头元素排在前面 */
}
 
/* 如果你想要在标题内容中保留一定宽度供箭头图标展示，可以添加一些左内边距 */
.adjusted-arrow-position .el-collapse-item__content {
  padding-left: 24px; /* 这个值根据你的需求和设计调整 */
}
</style>

在这个例子中，.adjusted-arrow-position 类用于选择折叠面板，然后通过CSS样式调整箭头的位置。justify-content: flex-start; 确保了箭头在容器中对齐到最左边。order: -1; 则将箭头元素的顺序设置为最高，确保它出现在最左边。同时，可能需要适当调整内容的padding-left，以保证在有箭头的情况下内容显示不错。