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

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，可以采取以下解决方案：

在外层包裹一个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，从而解决结构异常问题。

以上就是ant-design-vue折叠面板中如何避免a-radio-group被识别成子面板？的详细内容，更多请关注硕下网其它相关文章！