ant-design-vue的折叠面板collapse问题?

作者站长头像
站长
· 阅读数 12

正在使用ant-design-vue中的折叠面板,a-collapse中a-radio-group会被识别成子panel,导致结构异常,如何才能避免被认为是子panelant-design-vue的折叠面板collapse问题?

<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>
      <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>
    </a-collapse>
  </div>
</template>

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

这是异常的ant-radio-group结构ant-design-vue的折叠面板collapse问题?

这是正常的ant-radio-group结构ant-design-vue的折叠面板collapse问题?

回复
1个回答
avatar
test
2024-06-20

外层可以加个div包裹radio-group,可以解决样式错乱的问题

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容