Ant Design Vue 中 Collapse 嵌套 Radio Group 导致结构异常该如何解决?
ant design vue中的折叠面板collapse嵌套radio group异常问题
使用ant design vue构建的页面中, a-collapse 内部的 a-radio-group 会被识别为子面板,导致结构异常,无法正常展开。
解决方案:
为了避免此问题,可在 a-radio-group 外层添加一个 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> <div> <!-- 外层div包裹radio-group --> <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>
通过添加外层 div,a-radio-group 将被正确识别,不会作为子面板,从而解决结构异常的问题。
以上就是Ant Design Vue 中 Collapse 嵌套 Radio Group 导致结构异常该如何解决?的详细内容,更多请关注硕下网其它相关文章!