ant-design-vue折叠面板中避免a-radio-group被识别成子panel

在使用ant-design-vue的折叠面板collapse时，可能会遇到a-radio-group被识别成子panel的问题，导致结构异常。这是因为collapse的子组件是a-collapse-panel，而a-radio-group不是。

解决方案：

为了避免a-radio-group被识别成子panel，可以采取以下解决方案：

蓝湖代码转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.

下载

立即学习“前端免费学习笔记（深入）”；

在外层包裹一个div来容纳a-radio-group，如下所示：

<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>

<script lang="ts">
export default defineComponent({
  setup () {
    const activeKey = ref('introduction')
    const tab = ref('process')
    return {
      activeKey,
      tab
    }
  }
})
</script>

通过这种方式，a-radio-group将与a-collapse-panel并列，避免被识别成子panel，从而解决结构异常问题。