ant-design-vue中折叠面板collapse的问题

在使用ant-design-vue中的折叠面板时，遇到一个问题：其中的a-radio-group会被识别成子面板，导致结构异常。

原因是a-radio-group在折叠面板中被认为是一个单独的面板，而不是面板内容。而我们期望radio-group作为面板内容的一部分。

解决办法：

要在折叠面板中正确显示radio-group，可以给radio-group添加一个额外的div包裹，将其与面板内容隔离开来。

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

例如，修改后的代码如下：

<template><div>
    <a-collapse prefix-cls="s-accordion" :default-active-key="activeKey"><a-collapse-panel key="introduction" header="introduction"><p>introduction</p>
      </a-collapse-panel><div>
        <a-radio-group v-model:value="tab" style="margin: 16px"><a-radio-button value="tab1">tab1</a-radio-button><a-radio-button value="tab2">tab2</a-radio-button></a-radio-group>
</div>
    </a-collapse>
</div>
</template>
...

通过添加外部div包裹，radio-group现在将作为面板内容的独立部分，并不会被视为子面板。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！