elementui折叠
ElementUI 折叠组件使用指南
ElementUI 提供了 Collapse（折叠面板）组件，用于展示可折叠的内容区域，常用于 FAQ、设置面板等场景。
基本用法
通过 el-collapse 和 el-collapse-item 组件实现折叠面板，每个 el-collapse-item 代表一个可折叠的项。
<template>
<el-collapse v-model="activeNames">
<el-collapse-item title="标题1" name="1">
<div>内容1</div>
</el-collapse-item>
<el-collapse-item title="标题2" name="2">
<div>内容2</div>
</el-collapse-item>
</el-collapse>
</template>
<script>
export default {
data() {
return {
activeNames: ['1'] // 默认展开的项
};
}
};
</script>手风琴模式
设置 accordion 属性为 true，使折叠面板变为手风琴模式（每次只能展开一个面板）。
<el-collapse v-model="activeName" accordion>
<el-collapse-item title="标题1" name="1">
<div>内容1</div>
</el-collapse-item>
<el-collapse-item title="标题2" name="2">
<div>内容2</div>
</el-collapse-item>
</el-collapse>自定义标题
通过 title 插槽自定义折叠面板的标题内容。
<el-collapse>
<el-collapse-item>
<template #title>
<span style="color: #409EFF;">自定义标题</span>
</template>
<div>内容区域</div>
</el-collapse-item>
</el-collapse>事件绑定
el-collapse 提供 change 事件，在面板展开/折叠时触发。
<el-collapse @change="handleChange">
<el-collapse-item title="标题1" name="1">
<div>内容1</div>
</el-collapse-item>
</el-collapse>
<script>
export default {
methods: {
handleChange(val) {
console.log('当前展开的面板:', val);
}
}
};
</script>动态加载内容
通过动态数据渲染折叠面板，适用于从接口获取数据后展示。
<el-collapse v-model="activeNames">
<el-collapse-item
v-for="item in list"
:key="item.name"
:title="item.title"
:name="item.name">
<div>{{ item.content }}</div>
</el-collapse-item>
</el-collapse>
<script>
export default {
data() {
return {
activeNames: [],
list: [
{ title: '标题1', name: '1', content: '内容1' },
{ title: '标题2', name: '2', content: '内容2' }
]
};
}
};
</script>样式调整
通过覆盖默认 CSS 调整折叠面板的样式，例如修改边框、背景色等。
/* 修改标题背景色 */
.el-collapse-item__header {
background-color: #f5f7fa;
}
/* 修改内容区域边框 */
.el-collapse-item__wrap {
border-bottom: 1px solid #ebeef5;
}以上是 ElementUI 折叠面板的常见用法，适用于大多数业务场景。如需更复杂的交互，可以结合插槽和事件进一步扩展功能。
