• Collapse折叠面板
    • 何时使用
    • 代码演示
      • 折叠面板
      • 手风琴
      • 面板嵌套
      • 简洁风格
      • 自定义面板
      • 隐藏箭头
  • API
    • Collapse
    • 事件
    • Collapse.Panel
  • FAQ
    • 我希望箭头在右边,怎么做?

    Collapse折叠面板

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

    何时使用

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

    代码演示

    Collapse 折叠面板 - 图1

    折叠面板

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

    1. <template>
    2. <div>
    3. <a-collapse v-model="activeKey">
    4. <a-collapse-panel header="This is panel header 1" key="1">
    5. <p>{{text}}</p>
    6. </a-collapse-panel>
    7. <a-collapse-panel header="This is panel header 2" key="2" :disabled="false">
    8. <p>{{text}}</p>
    9. </a-collapse-panel>
    10. <a-collapse-panel header="This is panel header 3" key="3" disabled>
    11. <p>{{text}}</p>
    12. </a-collapse-panel>
    13. </a-collapse>
    14. </div>
    15. </template>
    16. <script>
    17. export default {
    18. data() {
    19. return {
    20. 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.`,
    21. activeKey: ['1'],
    22. };
    23. },
    24. watch: {
    25. activeKey(key) {
    26. console.log(key);
    27. },
    28. },
    29. };
    30. </script>

    Collapse 折叠面板 - 图2

    手风琴

    手风琴,每次只打开一个tab。默认打开第一个。

    1. <template>
    2. <div>
    3. <a-collapse accordion>
    4. <a-collapse-panel header="This is panel header 1" key="1">
    5. <p>{{text}}</p>
    6. </a-collapse-panel>
    7. <a-collapse-panel header="This is panel header 2" key="2" :disabled="false">
    8. <p>{{text}}</p>
    9. </a-collapse-panel>
    10. <a-collapse-panel header="This is panel header 3" key="3">
    11. <p>{{text}}</p>
    12. </a-collapse-panel>
    13. </a-collapse>
    14. </div>
    15. </template>
    16. <script>
    17. export default {
    18. data() {
    19. return {
    20. 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.`,
    21. };
    22. },
    23. };
    24. </script>

    Collapse 折叠面板 - 图3

    面板嵌套

    嵌套折叠面板。

    1. <template>
    2. <div>
    3. <a-collapse @change="changeActivekey">
    4. <a-collapse-panel header="This is panel header 1" key="1">
    5. <a-collapse defaultActiveKey="4">
    6. <a-collapse-panel header="This is panel nest panel" key="4">
    7. <p>{{text}}</p>
    8. </a-collapse-panel>
    9. </a-collapse>
    10. </a-collapse-panel>
    11. <a-collapse-panel header="This is panel header 2" key="2" :disabled="false">
    12. <p>{{text}}</p>
    13. </a-collapse-panel>
    14. <a-collapse-panel header="This is panel header 3" key="3">
    15. <p>{{text}}</p>
    16. </a-collapse-panel>
    17. </a-collapse>
    18. </div>
    19. </template>
    20. <script>
    21. export default {
    22. data() {
    23. return {
    24. 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.`,
    25. };
    26. },
    27. methods: {
    28. changeActivekey(key) {
    29. console.log(key);
    30. },
    31. },
    32. };
    33. </script>

    Collapse 折叠面板 - 图4

    简洁风格

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

    1. <template>
    2. <div>
    3. <a-collapse defaultActiveKey="1" :bordered="false">
    4. <a-collapse-panel header="This is panel header 1" key="1">
    5. <p>{{text}}</p>
    6. </a-collapse-panel>
    7. <a-collapse-panel header="This is panel header 2" key="2" :disabled="false">
    8. <p>{{text}}</p>
    9. </a-collapse-panel>
    10. <a-collapse-panel header="This is panel header 3" key="3">
    11. <p>{{text}}</p>
    12. </a-collapse-panel>
    13. </a-collapse>
    14. </div>
    15. </template>
    16. <script>
    17. export default {
    18. data() {
    19. return {
    20. 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.`,
    21. };
    22. },
    23. };
    24. </script>

    Collapse 折叠面板 - 图5

    自定义面板

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

    1. <template>
    2. <div>
    3. <a-collapse defaultActiveKey="1" :bordered="false">
    4. <template v-slot:expandIcon="props">
    5. <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
    6. </template>
    7. <a-collapse-panel header="This is panel header 1" key="1" :style="customStyle">
    8. <p>{{text}}</p>
    9. </a-collapse-panel>
    10. <a-collapse-panel header="This is panel header 2" key="2" :style="customStyle">
    11. <p>{{text}}</p>
    12. </a-collapse-panel>
    13. <a-collapse-panel header="This is panel header 3" key="3" :style="customStyle">
    14. <p>{{text}}</p>
    15. </a-collapse-panel>
    16. </a-collapse>
    17. </div>
    18. </template>
    19. <script>
    20. export default {
    21. data() {
    22. return {
    23. 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.`,
    24. customStyle:
    25. 'background: #f7f7f7;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden',
    26. };
    27. },
    28. };
    29. </script>

    Collapse 折叠面板 - 图6

    隐藏箭头

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

    1. <template>
    2. <div>
    3. <a-collapse defaultActiveKey="1" @change="changeActivekey">
    4. <a-collapse-panel header="This is panel header with arrow icon" key="1">
    5. <p>{{text}}</p>
    6. </a-collapse-panel>
    7. <a-collapse-panel header="This is panel header with no arrow icon" key="2" :showArrow="false">
    8. <p>{{text}}</p>
    9. </a-collapse-panel>
    10. </a-collapse>
    11. </div>
    12. </template>
    13. <script>
    14. export default {
    15. data() {
    16. return {
    17. 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.`,
    18. };
    19. },
    20. methods: {
    21. changeActivekey(key) {
    22. console.log(key);
    23. },
    24. },
    25. };
    26. </script>

    API

    Collapse

    参数说明类型默认值
    activeKey(v-model)当前激活 tab 面板的 keystring[]|string默认无,accordion 模式下默认第一个元素
    defaultActiveKey初始化选中面板的 keystring
    bordered带边框风格的折叠面板booleantrue
    accordion手风琴模式booleanfalse
    expandIcon自定义切换图标Function(props):VNode | slot="expandIcon" slot-scope="props"|v-slot:expandIcon="props"
    destroyInactivePanel销毁折叠隐藏的面板booleanfalse

    事件

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

    Collapse.Panel

    参数说明类型默认值
    disabled禁用后的面板展开与否将无法通过用户交互改变booleanfalse
    forceRender被隐藏时是否渲染 DOM 结构booleanfalse
    header面板头内容string|slot
    key对应 activeKeystring
    showArrow是否展示当前面板上的箭头booleantrue

    FAQ

    我希望箭头在右边,怎么做?

    通过样式调整,将箭头放到右边就行啦

    1. .ant-collapse .ant-collapse-item .ant-collapse-header .anticon {
    2. left: initial;
    3. right: 16px;
    4. }