elementplus 折叠面板用法

### 如何调整 ElementPlus 折叠面板中图标的自定义位置 在使用 ElementPlus 的折叠面板组件时，可以通过 CSS 和 DOM 操作来实现对图标样式的完全自定义。以下是具体方法： #### 1. 隐藏默认的箭头图标 为了替换默认的折叠面板箭头图标，首先需要将其隐藏。这可以借助 `::v-deep` 或者 `>>>` 来穿透样式[^1]。 ```css .el-collapse-item__arrow { display: none; } ``` 通过上述代码，原有的右箭头会被移除。 --- #### 2. 添加自定义图标 接下来，在折叠面板头部插入新的图标，并设置其显示逻辑。这里提供两种方式：静态和动态。 ##### **静态方式** 如果只需要固定的一个图标，则可以直接在 HTML 中嵌入该图标并绑定到 `.el-collapse-item__header` 上。 ```html <template> <div class="custom-icon"> <!-- 自定义图标 --> <span class="downArrow1"></span> </div> </template> <style scoped> .downArrow1 { display: inline-block; width: 13px; height: 16px; background-image: url(~@/assets/images/downArrow1.png); } /* 让头部内容两端分布 */ ::v-deep .el-collapse-item__header { justify-content: space-between; } </style> ``` 此方案适用于不需要切换状态的情况。 --- ##### **动态方式** 对于需要根据折叠状态（展开或收起）自动切换图标的场景，可通过监听 `expand-change` 事件或者利用伪类选择器完成。 ```html <template> <el-collapse v-model="activeNames" @change="handleChange"> <el-collapse-item title="标题" name="1"> <template #title> <span>标题文字</span> <span :class="[isActive ? 'downArrow1' : 'downArrow2']"></span> </template> </el-collapse-item> </el-collapse> </template> <script> export default { data() { return { activeNames: [], isActive: false, }; }, methods: { handleChange(names) { this.isActive = names.includes("1"); }, }, }; </script> <style scoped> .downArrow1 { display: inline-block; width: 13px; height: 16px; background-image: url(~@/assets/images/downArrow1.png); } .downArrow2 { display: inline-block; width: 13px; height: 16px; background-image: url(~@/assets/images/downArrow1.png); transform: rotate(-180deg); } </style> ``` 在此示例中，当折叠项被激活时，会触发 `handleChange` 方法更新 `isActive` 值，从而决定展示哪个方向的箭头。 --- #### 3. 调整图标位置 要精确控制图标的位置，可结合 Flexbox 完成布局调整。例如将图标放置于右侧中间位置。 ```css ::v-deep .el-collapse-item__header { display: flex; align-items: center; /* 垂直居中 */ justify-content: space-between; /* 左右分开 */ } .custom-icon { margin-left: auto; /* 推至最右侧 */ } ``` 这样即可确保图标始终位于折叠面板头部的右侧中央。 --- #### 总结 以上介绍了三种主要操作：隐藏原有图标、添加新图标以及定位图标的方法。这些技巧能够帮助开发者灵活定制 ElementPlus 折叠面板的行为与外观。

Element Plus 是一套基于 Vue.js 的桌面端组件库，它提供了丰富的 UI 组件和交互功能，其中包括了折叠表单（Collapse）组件。 折叠表单是一种常见的表单布局方式，可以将表单的不同部分进行折叠和展开，以便在有限的空间内展示更多的内容。Element Plus 的折叠表单组件提供了简洁美观的样式和灵活的配置选项，使得开发者可以轻松地创建具有折叠功能的表单。 使用 Element Plus 的折叠表单组件，你可以实现以下功能： 1. 折叠和展开表单的不同部分，以便用户可以根据需要查看或编辑相关内容。 2. 自定义每个折叠面板的标题和内容，以及展开和折叠时的动画效果。 3. 支持手风琴模式，即只能同时展开一个折叠面板，其他面板会自动折叠。 4. 提供了丰富的事件和方法，可以监听折叠状态的变化，以及动态控制折叠面板的展开和折叠。 如果你想了解更多关于 Element Plus 折叠表单组件的详细用法和配置选项，可以参考 Element Plus 官方文档中的相关章节。