Collapse 折叠面板

通过折叠面板收纳内容区域，适合 FAQ、配置说明、详情分组和较长内容的渐进展示。

基础用法

使用 v-model 绑定当前展开的面板。默认模式下可以同时展开多个面板，绑定值为数组。

标准项目从方案确认后开始计算交付周期，系统会根据项目类型、物料齐套和排期自动生成预计时间。

vue

<template>
  <el-collapse v-model="activeNames" @change="handleChange">
    <el-collapse-item title="交付周期如何计算？" name="delivery">
      <div>标准项目从方案确认后开始计算交付周期。</div>
    </el-collapse-item>
    <el-collapse-item title="报价配置可以修改吗？" name="quote">
      <div>报价提交前可以直接调整配置项。</div>
    </el-collapse-item>
  </el-collapse>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { CollapseModelValue } from 'element-plus'

const activeNames = ref(['delivery'])

const handleChange = (value: CollapseModelValue) => {
  console.log(value)
}
</script>

手风琴效果

设置 accordion 后，每次只能展开一个面板。手风琴模式下绑定值为单个面板的 name。

展示项目名称、客户、负责人和当前阶段。

vue

<template>
  <el-collapse v-model="activeName" accordion>
    <el-collapse-item title="基础信息" name="base">
      <div>展示项目名称、客户、负责人和当前阶段。</div>
    </el-collapse-item>
    <el-collapse-item title="报价信息" name="quote">
      <div>展示报价明细、折扣策略和审批状态。</div>
    </el-collapse-item>
  </el-collapse>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const activeName = ref('base')
</script>

自定义面板标题

除了 title 属性，也可以通过 title 插槽自定义面板标题。title 插槽会提供 isActive，可用于根据展开状态调整标题内容。

项目状态由计划、报价、交付、验收等节点自动汇总。

vue

<template>
  <el-collapse v-model="activeName" accordion>
    <el-collapse-item name="status">
      <template #title="{ isActive }">
        <span>
          项目状态说明
          <el-icon :color="isActive ? 'var(--el-color-primary)' : ''">
            <InfoFilled />
          </el-icon>
        </span>
      </template>
      <div>项目状态由计划、报价、交付、验收等节点自动汇总。</div>
    </el-collapse-item>
  </el-collapse>
</template>

<script setup lang="ts">
import { InfoFilled } from '@element-plus/icons-vue'
</script>

自定义图标

通过 icon 属性可以替换面板展开图标，也可以使用 icon 插槽根据 isActive 自定义图标区域内容。

当前项目存在物料到货风险，请关注供应商反馈。

vue

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="风险提示" name="risk" :icon="CaretRight">
      <div>当前项目存在物料到货风险。</div>
    </el-collapse-item>
    <el-collapse-item title="节点进度" name="progress">
      <template #icon="{ isActive }">
        <span>{{ isActive ? '收起' : '展开' }}</span>
      </template>
      <div>每个交付节点都会生成记录。</div>
    </el-collapse-item>
  </el-collapse>
</template>

<script setup lang="ts">
import { CaretRight } from '@element-plus/icons-vue'
</script>

图标位置

使用 expand-icon-position 设置展开图标位置，支持 left 和 right。

左侧图标适合标题较短、需要强化展开入口的场景。

右侧图标是默认模式，适合常规说明和 FAQ 列表。

vue

<template>
  <el-collapse v-model="leftActive" expand-icon-position="left">
    <el-collapse-item title="图标在左侧" name="left">
      <div>左侧图标适合标题较短的场景。</div>
    </el-collapse-item>
  </el-collapse>

  <el-collapse v-model="rightActive" expand-icon-position="right">
    <el-collapse-item title="图标在右侧" name="right">
      <div>右侧图标是默认模式。</div>
    </el-collapse-item>
  </el-collapse>
</template>

阻止折叠

通过 before-collapse 可以在面板切换前执行校验。返回 false，或返回被 reject 的 Promise，都会阻止切换。

允许切换

当开关为“阻止切换”时，当前面板不会切换展开状态。

vue

<template>
  <el-switch v-model="allowed" active-text="允许切换" inactive-text="阻止切换" />
  <el-collapse v-model="activeNames" :before-collapse="beforeCollapse">
    <el-collapse-item title="需要校验的配置" name="guarded">
      <div>当开关为“阻止切换”时，当前面板不会切换展开状态。</div>
    </el-collapse-item>
  </el-collapse>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const allowed = ref(true)
const activeNames = ref(['guarded'])

const beforeCollapse = () => allowed.value
</script>

禁用面板

为 el-collapse-item 设置 disabled 后，该面板不可展开或收起。

普通面板可以正常切换展开状态。

vue

<el-collapse v-model="activeNames">
  <el-collapse-item title="可操作面板" name="enabled">
    <div>普通面板可以正常切换展开状态。</div>
  </el-collapse-item>
  <el-collapse-item title="禁用面板" name="disabled" disabled>
    <div>禁用面板不会响应点击。</div>
  </el-collapse-item>
</el-collapse>

Collapse API

Collapse 属性

属性名	说明	类型	默认值
model-value / v-model	当前活动面板，手风琴模式为 `string`，普通模式为 `array`	`string \| array`	`[]`
accordion	是否为手风琴模式	`boolean`	`false`
expand-icon-position	展开图标位置	`left \| right`	`right`
before-collapse	折叠状态更改前的钩子，返回 `false` 或 reject 可阻止切换	`function`	`-`

Collapse 事件

事件名	说明	类型
change	当前活动面板变化时触发	`Function`

Collapse 插槽

插槽名	说明	子标签
default	自定义默认内容	Collapse Item

Collapse 暴露

名称	说明	类型
activeNames	当前活动的面板名称	`object`
setActiveNames	设置活动面板名称	`Function`

Collapse Item API

Collapse Item 属性

属性名	说明	类型	默认值
name	唯一标识符	`string \| number`	`-`
title	面板标题	`string`	`''`
icon	折叠项图标	`string \| component`	`ArrowRight`
disabled	是否禁用	`boolean`	`false`

Collapse Item 插槽

插槽名	说明	类型
default	面板内容	`-`
title	面板标题内容	`object`
icon	折叠项图标内容	`object`

Collapse Item 暴露

名称	说明	类型
isActive	当前折叠项是否激活	`object`

Collapse 折叠面板 ​

基础用法 ​

手风琴效果 ​

自定义面板标题 ​

自定义图标 ​

图标位置 ​

阻止折叠 ​

禁用面板 ​

Collapse API ​

Collapse 属性 ​

Collapse 事件 ​

Collapse 插槽 ​

Collapse 暴露 ​

Collapse Item API ​

Collapse Item 属性 ​

Collapse Item 插槽 ​

Collapse Item 暴露 ​