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

elementui折叠

2026-03-06 08:13:16前端教程

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 调整折叠面板的样式，例如修改边框、背景色等。

elementui折叠

/* 修改标题背景色 */
.el-collapse-item__header {
  background-color: #f5f7fa;
}

/* 修改内容区域边框 */
.el-collapse-item__wrap {
  border-bottom: 1px solid #ebeef5;
}

以上是 ElementUI 折叠面板的常见用法，适用于大多数业务场景。如需更复杂的交互，可以结合插槽和事件进一步扩展功能。

标签: elementui