Ant Design Vue 中 Collapse 嵌套 Radio Group 导致结构异常该如何解决？

大家好，今天本人给大家带来文章《Ant Design Vue 中 Collapse 嵌套 Radio Group 导致结构异常该如何解决？》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

ant design vue中的折叠面板collapse嵌套radio group异常问题

使用ant design vue构建的页面中， a-collapse 内部的 a-radio-group 会被识别为子面板，导致结构异常，无法正常展开。

解决方案：

为了避免此问题，可在 a-radio-group 外层添加一个 div 进行包裹，如下所示：

<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> <!-- 外层div包裹radio-group -->
        <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，a-radio-group 将被正确识别，不会作为子面板，从而解决结构异常的问题。

到这里，我们也就讲完了《Ant Design Vue 中 Collapse 嵌套 Radio Group 导致结构异常该如何解决？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！