当前位置：首页 > 前端教程

elementui panel

2026-01-15 19:44:00前端教程

ElementUI Panel 组件

ElementUI 的 Panel 组件（通常指 el-collapse 和 el-collapse-item）用于创建可折叠的面板，适合展示分组内容或实现手风琴效果。

基本用法

通过 el-collapse 包裹多个 el-collapse-item 实现折叠面板。每个 el-collapse-item 包含标题和内容区域：

elementui panel

<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'] // 默认展开的面板
    }
  }
}
</script>

手风琴模式

设置 accordion 属性实现每次只展开一个面板：

<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>

自定义标题

通过 slot 自定义标题内容：

elementui panel

<el-collapse-item name="1">
  <template slot="title">
    <i class="el-icon-info"></i> 自定义标题
  </template>
  <div>内容区域</div>
</el-collapse-item>

禁用状态

设置 disabled 属性禁用特定面板：

<el-collapse-item title="禁用面板" name="3" disabled>
  <div>无法展开的内容</div>
</el-collapse-item>

注意事项

v-model 绑定值对应 el-collapse-item 的 name 属性
手风琴模式下 v-model 应绑定字符串而非数组
面板内容可以是任意 HTML 或组件

样式定制

通过覆盖以下 CSS 类名实现样式自定义：

.el-collapse {
  border: none; /* 去除边框 */
}
.el-collapse-item__header {
  color: #409EFF; /* 标题颜色 */
}
.el-collapse-item__content {
  padding: 20px; /* 内容内边距 */
}