折叠面板 Collapse

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

何时使用

对复杂区域进行分组和隐藏，保持页面的整洁

基本使用

activeKey 传入 number[] | string[]，所有面板可同时展开

This is panel header 1

Copy

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 is panel header 2

This is panel header 3

Show Code

vue

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const collapseData = ref([
  {
    key: '1',
    header: 'This is panel header 1',
    content:
      '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.'
  },
  {
    key: '2',
    header: 'This is panel header 2',
    content:
      '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.'
  },
  {
    key: '3',
    header: 'This is panel header 3',
    content:
      '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'])
watchEffect(() => {
  console.log('activeKey', activeKey.value)
})
function onChange(key: number | string) {
  console.log('change', key)
}
</script>
<template>
  <Collapse :collapse-data="collapseData" v-model:active-key="activeKey" @change="onChange" />
</template>

手风琴

只允许单个内容区域展开，只需 activeKey 传入 number | string 即可

This is panel header 1

Copy

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 is panel header 2

This is panel header 3

Show Code

vue

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const collapseData = ref([
  {
    key: '1',
    header: 'This is panel header 1',
    content:
      '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.'
  },
  {
    key: '2',
    header: 'This is panel header 2',
    content:
      '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.'
  },
  {
    key: '3',
    header: 'This is panel header 3',
    content:
      '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 key = ref('1')
watchEffect(() => {
  console.log('key', key.value)
})
</script>
<template>
  <Collapse :collapse-data="collapseData" v-model:active-key="key" />
</template>

禁用

This is panel header 1

Copy

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 is panel header 2

This is panel header 3

This is panel header 1

Copy

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 is panel header 2

This is panel header 3

Show Code

vue

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const collapseData = ref([
  {
    key: '1',
    header: 'This is panel header 1',
    content:
      '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.'
  },
  {
    key: '2',
    header: 'This is panel header 2',
    content:
      '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.'
  },
  {
    key: '3',
    header: 'This is panel header 3',
    content:
      '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 disabledCollapseData = ref([
  {
    key: '1',
    header: 'This is panel header 1',
    content:
      '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.'
  },
  {
    key: '2',
    header: 'This is panel header 2',
    content:
      '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.'
  },
  {
    key: '3',
    disabled: true,
    header: 'This is panel header 3',
    content:
      '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'])
watchEffect(() => {
  console.log('activeKey', activeKey.value)
})
</script>
<template>
  <Flex vertical>
    <Collapse disabled :collapse-data="collapseData" v-model:active-key="activeKey" />
    <Collapse :collapse-data="disabledCollapseData" v-model:active-key="activeKey" />
  </Flex>
</template>

面板嵌套

This is panel header 1

Copy

This is panel header 1

Copy

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 is panel header 2

This is panel header 3

Show Code

vue

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const collapseData = ref([
  {
    key: '1',
    header: 'This is panel header 1',
    content:
      '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.'
  },
  {
    key: '2',
    header: 'This is panel header 2',
    content:
      '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.'
  },
  {
    key: '3',
    header: 'This is panel header 3',
    content:
      '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 nestCollapseData = ref([
  {
    key: '1',
    header: 'This is panel header 1',
    content:
      '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 nestActiveKey = ref(['1'])
watchEffect(() => {
  console.log('activeKey', activeKey.value)
})
watchEffect(() => {
  console.log('nestActiveKey', nestActiveKey.value)
})
</script>
<template>
  <Collapse :collapse-data="collapseData" v-model:active-key="activeKey">
    <template #content="{ key }">
      <Collapse v-if="key === '1'" :collapse-data="nestCollapseData" v-model:active-key="nestActiveKey" />
    </template>
  </Collapse>
</template>

无边框

This is panel header 1

Copy

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 is panel header 2

This is panel header 3

Show Code

vue

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const collapseData = ref([
  {
    key: '1',
    header: 'This is panel header 1',
    content:
      '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.'
  },
  {
    key: '2',
    header: 'This is panel header 2',
    content:
      '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.'
  },
  {
    key: '3',
    header: 'This is panel header 3',
    content:
      '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'])
watchEffect(() => {
  console.log('activeKey', activeKey.value)
})
</script>
<template>
  <Collapse :collapse-data="collapseData" v-model:active-key="activeKey" :bordered="false" />
</template>

可复制

This is panel header 1

template

Copy

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 is panel header 2

This is panel header 3

Show Code

vue

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const collapseData = ref([
  {
    key: '1',
    header: 'This is panel header 1',
    content:
      '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.'
  },
  {
    key: '2',
    header: 'This is panel header 2',
    content:
      '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.'
  },
  {
    key: '3',
    header: 'This is panel header 3',
    content:
      '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'])
watchEffect(() => {
  console.log('activeKey', activeKey.value)
})
</script>
<template>
  <Collapse copyable lang="template" :collapse-data="collapseData" v-model:active-key="activeKey" />
</template>

隐藏箭头

This is panel header 1

Copy

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 is panel header 2

This is panel header 3

Show Code

vue

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const arrowCollapseData = ref([
  {
    key: '1',
    header: 'This is panel header 1',
    content:
      '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.'
  },
  {
    key: '2',
    showArrow: false,
    header: 'This is panel header 2',
    content:
      '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.'
  },
  {
    key: '3',
    header: 'This is panel header 3',
    content:
      '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'])
watchEffect(() => {
  console.log('activeKey', activeKey.value)
})
</script>
<template>
  <Collapse :collapse-data="arrowCollapseData" v-model:active-key="activeKey" />
</template>

箭头位置

left

right

This is panel header 1

Copy

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 is panel header 2

This is panel header 3

Show Code

vue

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const collapseData = ref([
  {
    key: '1',
    header: 'This is panel header 1',
    content:
      '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.'
  },
  {
    key: '2',
    header: 'This is panel header 2',
    content:
      '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.'
  },
  {
    key: '3',
    header: 'This is panel header 3',
    content:
      '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 positionOptions = ref([
  {
    label: 'left',
    value: 'left'
  },
  {
    label: 'right',
    value: 'right'
  }
])
const arrowPlacement = ref('left')
const activeKey = ref(['1'])
watchEffect(() => {
  console.log('activeKey', activeKey.value)
})
</script>
<template>
  <Flex vertical>
    <Radio :options="positionOptions" v-model:value="arrowPlacement" button button-style="solid" />
    <Collapse :collapse-data="collapseData" v-model:active-key="activeKey" :arrow-placement="arrowPlacement" />
  </Flex>
</template>

自定义面板

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

This is panel header 1

Copy

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 is panel header 2

This is panel header 3

Show Code

vue

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import { DoubleRightOutlined, RightCircleFilled } from '@ant-design/icons-vue'
const collapseData = ref([
  {
    key: '1',
    header: 'This is panel header 1',
    content:
      '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.'
  },
  {
    key: '2',
    header: 'This is panel header 2',
    content:
      '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.'
  },
  {
    key: '3',
    header: 'This is panel header 3',
    content:
      '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'])
watchEffect(() => {
  console.log('activeKey', activeKey.value)
})
</script>
<template>
  <Collapse
    :collapse-data="collapseData"
    v-model:active-key="activeKey"
    :bordered="false"
    :collapse-style="{ backgroundColor: '#fff' }"
    :item-style="{
      backgroundColor: '#f7f7f7',
      borderRadius: '8px',
      marginBottom: '16px',
      border: 0
    }"
  >
    <template #arrow="{ key, active }">
      <DoubleRightOutlined v-if="key === '2'" :rotate="active ? 90 : 0" />
      <RightCircleFilled v-else :rotate="active ? 90 : 0" />
    </template>
  </Collapse>
</template>

自定义面板样式

This is panel header 1

Copy

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 is panel header 2

This is panel header 3

Show Code

vue

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const collapseData = ref([
  {
    key: '1',
    header: 'This is panel header 1',
    content:
      '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.'
  },
  {
    key: '2',
    header: 'This is panel header 2',
    content:
      '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.'
  },
  {
    key: '3',
    header: 'This is panel header 3',
    content:
      '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'])
watchEffect(() => {
  console.log('activeKey', activeKey.value)
})
</script>
<template>
  <Collapse
    :collapse-data="collapseData"
    v-model:active-key="activeKey"
    :arrow-style="{ fontSize: '14px', height: '25px' }"
    :header-style="{ fontSize: '16px', color: '#ff6900' }"
    :content-style="{ padding: '16px 24px', color: 'rgba(0, 0, 0, 0.65)' }"
  />
</template>

面板额外内容

This is panel header 1

Copy

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 is panel header 2

Extra

This is panel header 3

Show Code

vue

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import { StarOutlined, StarFilled } from '@ant-design/icons-vue'
const extraCollapseData = ref([
  {
    key: '1',
    header: 'This is panel header 1',
    extra: 'Extra',
    content:
      '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.'
  },
  {
    key: '2',
    header: 'This is panel header 2',
    extra: 'Extra',
    content:
      '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.'
  },
  {
    key: '3',
    header: 'This is panel header 3',
    extra: 'Extra',
    content:
      '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'])
watchEffect(() => {
  console.log('activeKey', activeKey.value)
})
function handleClick(event: Event, key: string | number) {
  event.stopPropagation() // 阻止事件冒泡
  console.log('event', event)
  console.log('key', key)
}
</script>
<template>
  <Collapse :collapse-data="extraCollapseData" v-model:active-key="activeKey">
    <template #extra="{ key }">
      <StarFilled @click="handleClick($event, key)" v-if="key === '1'" />
      <StarOutlined @click="handleClick($event, key)" v-if="key === '3'" />
    </template>
  </Collapse>
</template>

幽灵折叠面板

This is panel header 1

Copy

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 is panel header 2

This is panel header 3

Show Code

vue

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const collapseData = ref([
  {
    key: '1',
    header: 'This is panel header 1',
    content:
      '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.'
  },
  {
    key: '2',
    header: 'This is panel header 2',
    content:
      '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.'
  },
  {
    key: '3',
    header: 'This is panel header 3',
    content:
      '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'])
watchEffect(() => {
  console.log('activeKey', activeKey.value)
})
</script>
<template>
  <Collapse :collapse-data="collapseData" v-model:active-key="activeKey" ghost />
</template>

APIs

Collapse

参数	说明	类型	默认值
collapseData	折叠面板数据，可使用 `slot` 替换指定 `key` 的 `header` `content` `arrow` `extra` `lang`	Collapse[]	[]
activeKey v-model	当前激活 `tab` 面板的 `key`	number[] \| number \| string[] \| string \| null	null
disabled	是否禁用，优先级低于 `Collapse` 的 `disabled`	boolean	false
bordered	带边框风格的折叠面板	boolean	true
copyable	是否可复制面板内容	boolean	false
copyProps	复制按钮属性配置，参考 Button Props	object	{}
lang	面板右上角固定内容，例如标识 `language`	string \| slot	undefined
itemStyle	设置面板容器的样式	CSSProperties	{}
headerStyle	设置面板标题的样式	CSSProperties	{}
contentStyle	设置面板内容的样式	CSSProperties	{}
arrow	自定义箭头切换图标	slot	undefined
showArrow	是否展示箭头，优先级低于 `Collapse` 的 `showArrow`	boolean	true
arrowPlacement	箭头位置	'left' \| 'right'	'left'
arrowStyle	设置面板箭头的样式	CSSProperties	{}
extra	面板标题右侧的额外内容	string \| slot	undefined
ghost	使折叠面板透明且无边框	boolean	false

Collapse Type

名称	说明	类型	默认值
key	对应 `activeKey`，如果没有传入 `key` 属性，则默认使用数据索引 (`0,1,2...`) 绑定	string \| number	undefined
header	面板标题	string \| slot	undefined
content	面板内容	string \| slot	undefined
disabled	是否禁用	boolean	false
showArrow	是否展示箭头	boolean	true
extra	面板标题右侧的额外内容	string \| slot	undefined

Events

名称	说明	类型
change	切换面板的回调	(key: number \| string) => void

折叠面板 Collapse ​

何时使用 ​

基本使用 ​

手风琴 ​

禁用 ​

面板嵌套 ​

无边框 ​

可复制 ​

隐藏箭头 ​

箭头位置 ​

自定义面板 ​

自定义面板样式 ​

面板额外内容 ​

幽灵折叠面板 ​

APIs ​

Collapse ​

Collapse Type ​

Events ​

折叠面板 Collapse

何时使用

基本使用

手风琴

禁用

面板嵌套

无边框

可复制

隐藏箭头

箭头位置

自定义面板

自定义面板样式

面板额外内容

幽灵折叠面板

APIs

Collapse

Collapse Type

Events