Appearance

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.

vue
<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">
      <p>{{ text }}</p>
    </a-collapse-panel>
    <a-collapse-panel key="3" header="This is panel header 3" collapsible="disabled">
      <p>{{ text }}</p>
    </a-collapse-panel>
  </a-collapse>
</template>
<script setup>
import { ref, watch } from 'vue';
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);
});
</script>

手风琴 ​

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

vue
<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">
      <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 setup>
import { ref } from 'vue';
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.`;
</script>

面板嵌套 ​

嵌套折叠面板。

vue
<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">
      <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 setup>
import { ref } from 'vue';
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 => {
  console.log(key);
};
</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.

vue
<template>
  <a-collapse
    v-model:activeKey="activeKey"
    :bordered="false"
    style="background: rgb(255, 255, 255)"
  >
    <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 setup>
import { ref } from 'vue';
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';
</script>

可折叠触发区域 ​

通过 collapsible 属性，可以设置面板的可折叠触发区域。

This panel can only be collapsed by clicking 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.

This panel can only be collapsed by clicking 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.

vue
<template>
  <a-space direction="vertical">
    <a-collapse v-model:activeKey="activeKey" collapsible="header">
      <a-collapse-panel key="1" header="This panel can only be collapsed by clicking text">
        <p>{{ text }}</p>
      </a-collapse-panel>
    </a-collapse>
    <a-collapse v-model:activeKey="activeKey" collapsible="icon">
      <a-collapse-panel key="1" header="This panel can only be collapsed by clicking icon">
        <p>{{ text }}</p>
      </a-collapse-panel>
    </a-collapse>
    <a-collapse collapsible="disabled">
      <a-collapse-panel key="1" header="This panel can't be collapsed">
        <p>{{ text }}</p>
      </a-collapse-panel>
    </a-collapse>
  </a-space>
</template>
<script setup>
import { ref } from 'vue';
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.`;
</script>
<style scoped>
.ant-space {
  width: 100%;
}
</style>

API ​

Collapse ​

参数说明类型默认值
accordion手风琴模式，始终只有一个面板处在激活状态booleanfalse
activeKey(v-model)当前激活 tab 面板的 keystring[] | string | number[] | number默认无，手风琴模式下默认第一个元素
bordered带边框风格的折叠面板booleantrue
collapsible所有子面板是否可折叠或指定可折叠触发区域header | icon | disabled-
destroyInactivePanel销毁折叠隐藏的面板booleanfalse
expandIcon自定义切换图标Function(props):VNode | slot="expandIcon"slot-scope="props" | #expandIcon="props"
expandIconPosition设置图标位置start | end-
ghost使折叠面板透明且无边框booleanfalse

事件 ​

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

Collapse.Panel ​

参数说明类型默认值
collapsible是否可折叠或指定可折叠触发区域header | disabled-
extra自定义渲染每个面板右上角的内容VNode | slot-
forceRender被隐藏时是否渲染 DOM 结构booleanfalse
header面板头内容string | slot-
key对应 activeKeystring | number-
showArrow是否展示当前面板上的箭头booleantrue