折叠面板组件 (Collapse)

Element-UI 的 Collapse 组件用于在有限的空间内展示内容，通过折叠和展开的方式节省空间。可以通过手风琴模式和普通模式管理多个面板的展开状态。

提示

Collapse 折叠面板组件官方文档：https://element.eleme.cn/#/zh-CN/component/collapse (opens new window)

1. 基本用法

基本语法：使用 <el-collapse> 标签作为容器，内部包含多个 <el-collapse-item>，每个 el-collapse-item 都表示一个可折叠的面板。

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="面板 1" name="1">
      <p>面板 1 的内容</p>
    </el-collapse-item>
    <el-collapse-item title="面板 2" name="2">
      <p>面板 2 的内容</p>
    </el-collapse-item>
    <el-collapse-item title="面板 3" name="3" :disabled="true">
      <p>面板 3 的内容（已禁用）</p>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ['1'] // 当前激活的面板，可以是字符串或数组
    };
  }
};
</script>

• v-model 绑定：通过 v-model 绑定当前激活的面板。若为多选模式，绑定值应为数组；若为手风琴模式，绑定值应为字符串。
• 面板标题：通过 title 属性设置每个面板的标题。
• 禁用面板：使用 disabled 属性禁用某个面板，使其不可展开或折叠。
• 

Collapse 属性

参数	说明	类型	可选值	默认值
value / v-model	当前激活的面板。如果是手风琴模式，绑定值类型为 string，否则为 array。	string / array	—	—
accordion	是否手风琴模式	boolean	—	false

Collapse 方法

Collapse 组件本身没有特定的方法，主要通过 v-model 和事件来控制其行为。

Collapse 事件

事件名称	说明	回调参数
change	当前激活面板改变时触发。如果是手风琴模式，参数类型为 string，否则为 array。	activeNames: array / string

Collapse-Item 属性

参数	说明	类型	可选值	默认值
name	面板唯一标志符	string / number	—	—
title	面板标题	string	—	—
disabled	是否禁用	boolean	—	false

2. 面板常用示例

手风琴模式

通过设置 accordion 属性为 true，使得每次只能展开一个面板，这种模式下 v-model 绑定的值为 string 类型。

<template>
  <el-collapse v-model="activeName" accordion>
    <el-collapse-item title="面板 1" name="1">
      <p>面板 1 的内容</p>
    </el-collapse-item>
    <el-collapse-item title="面板 2" name="2">
      <p>面板 2 的内容</p>
    </el-collapse-item>
    <el-collapse-item title="面板 3" name="3">
      <p>面板 3 的内容</p>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeName: '1' // 当前激活的面板，手风琴模式下为字符串
    };
  }
};
</script>

• 手风琴模式：在 el-collapse 中添加 accordion 属性，确保每次只有一个面板展开。
• 绑定值类型：在手风琴模式下，v-model 绑定的值应为 string 类型。
• 

监听面板变化

通过监听 change 事件来执行某些操作，例如记录用户的选择或根据激活的面板做出相应的处理。

<template>
  <el-collapse v-model="activeNames" @change="handleChange">
    <el-collapse-item title="面板 1" name="1">
      <p>面板 1 的内容</p>
    </el-collapse-item>
    <el-collapse-item title="面板 2" name="2">
      <p>面板 2 的内容</p>
    </el-collapse-item>
    <el-collapse-item title="面板 3" name="3">
      <p>面板 3 的内容</p>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ['1'] // 当前激活的面板，为数组类型
    };
  },
  methods: {
    handleChange(activeNames) {
      console.log('当前激活的面板:', activeNames);
    }
  }
};
</script>

• change 事件：每当激活的面板发生变化时，change 事件会触发，并传递当前激活的面板标识符。
• 回调参数：手风琴模式下回调参数为 string，多选模式下为 array。

禁用面板

通过 disabled 属性禁用某个面板，使其无法展开或折叠。

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="面板 1" name="1">
      <p>面板 1 的内容</p>
    </el-collapse-item>
    <el-collapse-item title="面板 2" name="2">
      <p>面板 2 的内容</p>
    </el-collapse-item>
    <el-collapse-item title="面板 3" name="3" :disabled="true">
      <p>面板 3 的内容（已禁用）</p>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ['1'] // 当前激活的面板
    };
  }
};
</script>

• 禁用面板：通过 disabled 属性禁用某个面板，使其不可被用户操作。

自定义面板标题

除了通过 title 属性设置面板标题，还可以通过具名 slot 来实现更灵活的自定义面板标题内容，如增加图标、按钮等。

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item name="1">
      <!-- 使用 slot 自定义标题内容 -->
      <template v-slot:title>
        <span>自定义标题 1</span>
        <i class="el-icon-info"></i>
      </template>
      <p>面板 1 的内容</p>
    </el-collapse-item>
    <el-collapse-item name="2">
      <template v-slot:title>
        <span>自定义标题 2</span>
        <i class="el-icon-warning"></i>
      </template>
      <p>面板 2 的内容</p>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ['1'] // 当前激活的面板
    };
  }
};
</script>

• 自定义标题：使用 slot 插槽来覆盖默认的标题内容，从而实现更多的自定义，例如添加图标、按钮等其他元素。
• 

3. 总结

• 灵活的折叠模式：Collapse 组件支持普通模式和手风琴模式，可以灵活展示和隐藏内容。
• 事件处理：通过 change 事件可以在面板状态变化时进行处理，提升交互性。
• 属性控制：通过 v-model 控制当前激活的面板，disabled 属性可以禁用某个面板。