elementui panel
ElementUI Panel 组件使用指南
ElementUI 的 Panel 组件（通常指 el-collapse 和 el-collapse-item）用于创建可折叠的内容区域，适用于常见的手风琴式布局或信息分组展示。
基本用法
通过 el-collapse 包裹多个 el-collapse-item 实现折叠面板组。每个 el-collapse-item 需定义 title 属性作为面板标题：
<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>
<script>
export default {
data() {
return {
activeNames: ['1'] // 默认展开的面板name数组
}
}
}
</script>手风琴模式
设置 accordion 属性可开启手风琴模式（每次仅展开一个面板）：
<el-collapse v-model="activeName" accordion>
<el-collapse-item title="面板1" name="1">
<div>内容1</div>
</el-collapse-item>
</el-collapse>自定义标题
通过 slot="title" 自定义标题区域内容：
<el-collapse-item name="1">
<template slot="title">
<i class="el-icon-info"></i> 自定义标题
</template>
<div>面板内容</div>
</el-collapse-item>禁用状态
为 el-collapse-item 添加 disabled 属性可禁用特定面板：
<el-collapse-item title="禁用面板" name="2" disabled>
<div>不可展开的内容</div>
</el-collapse-item>事件监听
通过 change 事件监听面板状态变化：
<el-collapse @change="handleChange">
<!-- 面板内容 -->
</el-collapse>
<script>
methods: {
handleChange(activeNames) {
console.log('当前展开的面板:', activeNames)
}
}
</script>样式定制
通过覆盖以下CSS类名实现样式自定义：
.el-collapse：整体容器样式.el-collapse-item__header：标题栏样式.el-collapse-item__wrap：内容区域包裹层.el-collapse-item__content：内容区域
示例CSS：
.el-collapse-item__header {
font-weight: bold;
color: #409EFF;
}
