ant-design-vue 折叠面板中 radio 组被识别成子面板的解决方法

在使用 ant-design-vue 中的折叠面板 () 时，如果在内部添加一个 a-radio-group，可能会出现 radio 组被误认为子面板的问题，导致样式错乱。

要避免这种情况，可以在 radio 组的外层添加一个 div 容器包裹，如下所示：

<template>
  <div>
    <a-collapse prefix-cls="s-accordion" :default-active-key="activeKey">
      <a-collapse-panel key="introduction" header="introduction">
        <p>introduction</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/xiazai/skill10385" title="Vue Wrap"><img
                                                                                src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="Vue Wrap" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/xiazai/skill10385" title="Vue Wrap">Vue Wrap</a>
                                                                        <p>Vue 入门指南 — JavaScript 框架</p>
                                                                </div>
                                                                <a href="/xiazai/skill10385" title="Vue Wrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div>
      </a-collapse-panel>

      <!-- 外层包裹 Radio 组 -->
      <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>

通过这种方式，外层的 div 容器可以将 radio 组从折叠面板的结构中分离出来，从而防止其被错误地识别为子面板，从而解决样式错乱的问题。

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