Collapse 折叠面板

通过折叠面板收纳内容区域

基础用法

可同时展开多个面板，面板之间不影响

Collapse 折叠面板 - 图1

  1. <template>
  2.   <div class="demo-collapse">
  3.     <el-collapse v-model="activeNames" @change="handleChange">
  4.       <el-collapse-item title="Consistency" name="1">
  5.         <div>
  6.           Consistent with real life: in line with the process and logic of real
  7.           life, and comply with languages and habits that the users are used to;
  8.         </div>
  9.         <div>
  10.           Consistent within interface: all elements should be consistent, such
  11.           as: design style, icons and texts, position of elements, etc.
  12.         </div>
  13.       </el-collapse-item>
  14.       <el-collapse-item title="Feedback" name="2">
  15.         <div>
  16.           Operation feedback: enable the users to clearly perceive their
  17.           operations by style updates and interactive effects;
  18.         </div>
  19.         <div>
  20.           Visual feedback: reflect current state by updating or rearranging
  21.           elements of the page.
  22.         </div>
  23.       </el-collapse-item>
  24.       <el-collapse-item title="Efficiency" name="3">
  25.         <div>
  26.           Simplify the process: keep operating process simple and intuitive;
  27.         </div>
  28.         <div>
  29.           Definite and clear: enunciate your intentions clearly so that the
  30.           users can quickly understand and make decisions;
  31.         </div>
  32.         <div>
  33.           Easy to identify: the interface should be straightforward, which helps
  34.           the users to identify and frees them from memorizing and recalling.
  35.         </div>
  36.       </el-collapse-item>
  37.       <el-collapse-item title="Controllability" name="4">
  38.         <div>
  39.           Decision making: giving advices about operations is acceptable, but do
  40.           not make decisions for the users;
  41.         </div>
  42.         <div>
  43.           Controlled consequences: users should be granted the freedom to
  44.           operate, including canceling, aborting or terminating current
  45.           operation.
  46.         </div>
  47.       </el-collapse-item>
  48.     </el-collapse>
  49.   </div>
  50. </template>
  52. <script lang="ts" setup>
  53. import { ref } from 'vue'
  55. const activeNames = ref(['1'])
  56. const handleChange = (val: string[]) => {
  57.   console.log(val)
  58. }
  59. </script>

手风琴效果

每次只能展开一个面板

通过 accordion 属性来设置是否以手风琴模式显示。

Collapse 折叠面板 - 图2

  1. <template>
  2.   <div class="demo-collapse">
  3.     <el-collapse v-model="activeName" accordion>
  4.       <el-collapse-item title="Consistency" name="1">
  5.         <div>
  6.           Consistent with real life: in line with the process and logic of real
  7.           life, and comply with languages and habits that the users are used to;
  8.         </div>
  9.         <div>
  10.           Consistent within interface: all elements should be consistent, such
  11.           as: design style, icons and texts, position of elements, etc.
  12.         </div>
  13.       </el-collapse-item>
  14.       <el-collapse-item title="Feedback" name="2">
  15.         <div>
  16.           Operation feedback: enable the users to clearly perceive their
  17.           operations by style updates and interactive effects;
  18.         </div>
  19.         <div>
  20.           Visual feedback: reflect current state by updating or rearranging
  21.           elements of the page.
  22.         </div>
  23.       </el-collapse-item>
  24.       <el-collapse-item title="Efficiency" name="3">
  25.         <div>
  26.           Simplify the process: keep operating process simple and intuitive;
  27.         </div>
  28.         <div>
  29.           Definite and clear: enunciate your intentions clearly so that the
  30.           users can quickly understand and make decisions;
  31.         </div>
  32.         <div>
  33.           Easy to identify: the interface should be straightforward, which helps
  34.           the users to identify and frees them from memorizing and recalling.
  35.         </div>
  36.       </el-collapse-item>
  37.       <el-collapse-item title="Controllability" name="4">
  38.         <div>
  39.           Decision making: giving advices about operations is acceptable, but do
  40.           not make decisions for the users;
  41.         </div>
  42.         <div>
  43.           Controlled consequences: users should be granted the freedom to
  44.           operate, including canceling, aborting or terminating current
  45.           operation.
  46.         </div>
  47.       </el-collapse-item>
  48.     </el-collapse>
  49.   </div>
  50. </template>
  52. <script lang="ts" setup>
  53. import { ref } from 'vue'
  55. const activeName = ref('1')
  56. </script>

自定义面板标题

除了可以通过 title 属性以外，还可以通过具名 slot 来实现自定义面板的标题内容，以实现增加图标等效果。

Collapse 折叠面板 - 图3

  1. <template>
  2.   <div class="demo-collapse">
  3.     <el-collapse accordion>
  4.       <el-collapse-item name="1">
  5.         <template #title>
  6.           Consistency<el-icon class="header-icon">
  7.             <info-filled />
  8.           </el-icon>
  9.         </template>
  10.         <div>
  11.           Consistent with real life: in line with the process and logic of real
  12.           life, and comply with languages and habits that the users are used to;
  13.         </div>
  14.         <div>
  15.           Consistent within interface: all elements should be consistent, such
  16.           as: design style, icons and texts, position of elements, etc.
  17.         </div>
  18.       </el-collapse-item>
  19.       <el-collapse-item title="Feedback" name="2">
  20.         <div>
  21.           Operation feedback: enable the users to clearly perceive their
  22.           operations by style updates and interactive effects;
  23.         </div>
  24.         <div>
  25.           Visual feedback: reflect current state by updating or rearranging
  26.           elements of the page.
  27.         </div>
  28.       </el-collapse-item>
  29.       <el-collapse-item title="Efficiency" name="3">
  30.         <div>
  31.           Simplify the process: keep operating process simple and intuitive;
  32.         </div>
  33.         <div>
  34.           Definite and clear: enunciate your intentions clearly so that the
  35.           users can quickly understand and make decisions;
  36.         </div>
  37.         <div>
  38.           Easy to identify: the interface should be straightforward, which helps
  39.           the users to identify and frees them from memorizing and recalling.
  40.         </div>
  41.       </el-collapse-item>
  42.       <el-collapse-item title="Controllability" name="4">
  43.         <div>
  44.           Decision making: giving advices about operations is acceptable, but do
  45.           not make decisions for the users;
  46.         </div>
  47.         <div>
  48.           Controlled consequences: users should be granted the freedom to
  49.           operate, including canceling, aborting or terminating current
  50.           operation.
  51.         </div>
  52.       </el-collapse-item>
  53.     </el-collapse>
  54.   </div>
  55. </template>
  57. <script setup lang="ts">
  58. import { InfoFilled } from '@element-plus/icons-vue'
  59. </script>

Collapse 属性

属性详情类型可选值默认值
model-value / v-model当前激活的面板(如果是手风琴模式，绑定值类型需要为string，否则为array)string (accordion mode) / array (non-accordion mode)——
accordion是否手风琴模式boolean—false

Collapse 事件

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

Collapse 插槽

插槽名Description子标签
-自定义默认内容Collapse Item

Collapse Item 属性

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

Collapse Item 插槽

插槽名说明
—content of Collapse Item
titlecontent of Collapse Item title

源代码

组件 Collapse 折叠面板 - 图4 • 文档 Collapse 折叠面板 - 图5

贡献者

Collapse 折叠面板 - 图6 三咲智子

Collapse 折叠面板 - 图7 云游君

Collapse 折叠面板 - 图8 JeremyWuuuuu

Collapse 折叠面板 - 图9 Delyan Haralanov

Collapse 折叠面板 - 图10 bqy

Collapse 折叠面板 - 图11 C.Y.Kun

Collapse 折叠面板 - 图12 류한경

Collapse 折叠面板 - 图13 Alan Wang

Collapse 折叠面板 - 图14 Aex

Collapse 折叠面板 - 图15 msidolphin

Collapse 折叠面板 - 图16 on the field of hope

Collapse 折叠面板 - 图17 Hades-li

Collapse 折叠面板 - 图18 qiang