Ant-Design-Vue 折叠面板中 Radio 组被识别为子面板如何解决?
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> </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 组从折叠面板的结构中分离出来,从而防止其被错误地识别为子面板,从而解决样式错乱的问题。
以上就是Ant-Design-Vue 折叠面板中 Radio 组被识别为子面板如何解决?的详细内容,更多请关注硕下网其它相关文章!