Collapse 折叠面板

可以折叠/展开的内容区域。

何时使用

  • 对复杂区域进行分组和隐藏，保持页面的整洁。
  • '手风琴' 是一种特殊的折叠面板，只允许单个内容区域展开。

代码演示

This is panel header 1

A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.

折叠面板

可以同时展开多个面板，这个例子默认展开了第一个。

<template>
  <a-collapse v-model:activeKey="activeKey">
    <a-collapse-panel key="1" header="This is panel header 1">
      <p>{{ text }}</p>
    </a-collapse-panel>
    <a-collapse-panel key="2" header="This is panel header 2" :disabled="false">
      <p>{{ text }}</p>
    </a-collapse-panel>
    <a-collapse-panel key="3" header="This is panel header 3" disabled>
      <p>{{ text }}</p>
    </a-collapse-panel>
  </a-collapse>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'; 
export default defineComponent({
  setup() {
    const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
    const activeKey = ref(['1']); 
    watch(activeKey, val => {
      console.log(val);
    }); 
    return {
      text,
      activeKey,
    };
  },
});
</script>
手风琴

手风琴，每次只打开一个 tab。

<template>
  <a-collapse v-model:activeKey="activeKey" accordion>
    <a-collapse-panel key="1" header="This is panel header 1">
      <p>{{ text }}</p>
    </a-collapse-panel>
    <a-collapse-panel key="2" header="This is panel header 2" :disabled="false">
      <p>{{ text }}</p>
    </a-collapse-panel>
    <a-collapse-panel key="3" header="This is panel header 3">
      <p>{{ text }}</p>
    </a-collapse-panel>
  </a-collapse>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'; 
export default defineComponent({
  setup() {
    const activeKey = ref([]);
    const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`; 
    return {
      activeKey,
      text,
    };
  },
});
</script>
面板嵌套

嵌套折叠面板。

<template>
  <a-collapse v-model:activeKey="activeKey" @change="changeActivekey">
    <a-collapse-panel key="1" header="This is panel header 1">
      <a-collapse default-active-key="4">
        <a-collapse-panel key="4" header="This is panel nest panel">
          <p>{{ text }}</p>
        </a-collapse-panel>
      </a-collapse>
    </a-collapse-panel>
    <a-collapse-panel key="2" header="This is panel header 2" :disabled="false">
      <p>{{ text }}</p>
    </a-collapse-panel>
    <a-collapse-panel key="3" header="This is panel header 3">
      <p>{{ text }}</p>
    </a-collapse-panel>
  </a-collapse>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'; 
export default defineComponent({
  setup() {
    const activeKey = ref([]);
    const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`; 
    const changeActivekey = (key: string) => {
      console.log(key);
    }; 
    return {
      activeKey,
      text,
      changeActivekey,
    };
  },
});
</script>
This is panel header 1

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

简洁风格

一套没有边框的简洁样式。

<template>
  <a-collapse v-model:activeKey="activeKey" :bordered="false">
    <a-collapse-panel key="1" header="This is panel header 1">
      <p>{{ text }}</p>
    </a-collapse-panel>
    <a-collapse-panel key="2" header="This is panel header 2" :disabled="false">
      <p>{{ text }}</p>
    </a-collapse-panel>
    <a-collapse-panel key="3" header="This is panel header 3">
      <p>{{ text }}</p>
    </a-collapse-panel>
  </a-collapse>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const activeKey = ref(['1']);
    const text = `A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.`;
    return {
      activeKey,
      text,
    };
  },
});
</script>
This is panel header 1

A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.

自定义面板

自定义各个面板的背景色、圆角、边距和图标。

<template>
  <a-collapse v-model:activeKey="activeKey" :bordered="false">
    <template #expandIcon="{ isActive }">
      <caret-right-outlined :rotate="isActive ? 90 : 0" />
    </template>
    <a-collapse-panel key="1" header="This is panel header 1" :style="customStyle">
      <p>{{ text }}</p>
    </a-collapse-panel>
    <a-collapse-panel key="2" header="This is panel header 2" :style="customStyle">
      <p>{{ text }}</p>
    </a-collapse-panel>
    <a-collapse-panel key="3" header="This is panel header 3" :style="customStyle">
      <p>{{ text }}</p>
    </a-collapse-panel>
  </a-collapse>
</template>
<script lang="ts">
import { CaretRightOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue'; 
export default defineComponent({
  components: {
    CaretRightOutlined,
  },
  setup() {
    const activeKey = ref(['1']);
    const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
    const customStyle =
      'background: #f7f7f7;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden';
    return {
      activeKey,
      text,
      customStyle,
    };
  },
});
</script>
This is panel header with arrow icon

A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.

隐藏箭头

你可以通过 :showArrow="false" 隐藏 a-collapse-panel 组件的箭头图标。

<template>
  <a-collapse v-model:activeKey="activeKey">
    <a-collapse-panel key="1" header="This is panel header with arrow icon">
      <p>{{ text }}</p>
    </a-collapse-panel>
    <a-collapse-panel key="2" header="This is panel header with no arrow icon" :show-arrow="false">
      <p>{{ text }}</p>
    </a-collapse-panel>
  </a-collapse>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'; 
export default defineComponent({
  setup() {
    const activeKey = ref(['1']);
    const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`; 
    watch(activeKey, val => {
      console.log('activeKey', val);
    }); 
    return {
      activeKey,
      text,
    };
  },
});
</script>
This is panel header 1

A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.


Expand Icon Position:
left
额外节点

可以同时展开多个面板，这个例子默认展开了第一个。

<template>
  <a-collapse v-model:activeKey="activeKey" :expand-icon-position="expandIconPosition">
    <a-collapse-panel key="1" header="This is panel header 1">
      <p>{{ text }}</p>
      <template #extra><setting-outlined @click="handleClick" /></template>
    </a-collapse-panel>
    <a-collapse-panel key="2" header="This is panel header 2" :disabled="false">
      <p>{{ text }}</p>
      <template #extra><setting-outlined @click="handleClick" /></template>
    </a-collapse-panel>
    <a-collapse-panel key="3" header="This is panel header 3" disabled>
      <p>{{ text }}</p>
      <template #extra><setting-outlined @click="handleClick" /></template>
    </a-collapse-panel>
  </a-collapse>
  <br />
  <span>Expand Icon Position:</span>
  <a-select v-model:value="expandIconPosition">
    <a-select-option value="left">left</a-select-option>
    <a-select-option value="right">right</a-select-option>
  </a-select>
</template>
<script lang="ts">
import { SettingOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, watch } from 'vue'; 
export default defineComponent({
  components: {
    SettingOutlined,
  },
  setup() {
    const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
    const activeKey = ref(['1']);
    const expandIconPosition = ref('left'); 
    const handleClick = (event: MouseEvent) => {
      // If you don't want click extra trigger collapse, you can prevent this:
      event.stopPropagation();
    };
    watch(activeKey, val => {
      console.log(val);
    }); 
    return {
      text,
      activeKey,
      expandIconPosition,
      handleClick,
    };
  },
});
</script>

API#

Collapse

参数 说明 类型 默认值 版本
activeKey(v-model) 当前激活 tab 面板的 key string[]|string 默认无，accordion 模式下默认第一个元素
bordered 带边框风格的折叠面板 boolean true
accordion 手风琴模式 boolean false
expandIcon 自定义切换图标 Function(props):VNode | slot="expandIcon" slot-scope="props"|#expandIcon="props"
expandIconPosition 设置图标位置： left, right left - 1.5.0
destroyInactivePanel 销毁折叠隐藏的面板 boolean false

事件

事件名称 说明 回调参数 版本
change 切换面板的回调 function(key)

Collapse.Panel

参数 说明 类型 默认值 版本
disabled 禁用后的面板展开与否将无法通过用户交互改变 boolean false
forceRender 被隐藏时是否渲染 DOM 结构 boolean false
header 面板头内容 string|slot 无
key 对应 activeKey string | number 无
showArrow 是否展示当前面板上的箭头 boolean true
extra 自定义渲染每个面板右上角的内容 VNode | slot - 1.5.0