Ant

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

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

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

<template>
  <p>
    <a-collapse prefix-cls="s-accordion" :default-active-key="activeKey">
      <a-collapse-panel key="introduction" header="introduction">
        <p>introduction</p>
      </a-collapse-panel>

      <!-- 外层包裹 Radio 组 -->
      <p>
        <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>
      </p>
    </a-collapse>
  </p>
</template>

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

登录后复制

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

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

以上就是Ant-Design-Vue 折叠面板中 Radio 组被识别为子面板如何解决？的详细内容，更多请关注抖狐科技其它相关文章！