Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: naive 查询表单渲染异常 #4721

Closed
5 tasks done
RanMaoting opened this issue Oct 23, 2024 · 3 comments · Fixed by #5071
Closed
5 tasks done

Bug: naive 查询表单渲染异常 #4721

RanMaoting opened this issue Oct 23, 2024 · 3 comments · Fixed by #5071

Comments

@RanMaoting
Copy link

RanMaoting commented Oct 23, 2024

Version

Vben Admin V5

Describe the bug?

代码如下

import { NRadioButton } from 'naive-ui';
const [QueryForm] = useVbenForm({
  // 默认展开
  collapsed: false,
  layout: 'horizontal',
  commonConfig: {
    controlClass: 'h-full',
  },
  schema: [
    {
      component: 'RadioGroup',
      defaultValue: 1,
      fieldName: 'remark',
      label: 'remark',
      renderComponentContent: () => {
        return {
          default: () =>
            Array.from({ length: 5 }, (_, index) =>
              h(NRadioButton, { value: index, label: String(index) }),
            ),
        };
      },
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: false,
  // 按下回车时是否提交表单
  submitOnEnter: false,
  wrapperClass: 'grid-cols-1 md:grid-cols-4 lg:grid-cols-5',
});

image
zheng正常渲染应该是这样的
image
但是实际上渲染是这样的
image

Reproduction

/

System Info

/

Relevant log output

No response

Validations

@RanMaoting
Copy link
Author

对比了一下naive官网的代码通过表单渲染出来的group组件似乎少了样式,但是不知道怎么修复
image

@RanMaoting
Copy link
Author

自定义渲染的情况下,默认值不会生效
image

@mynetfan
Copy link
Collaborator

mynetfan commented Dec 8, 2024

RadioGroup如果使用了按钮组样式(RadioButton),需要用Space包裹。具体请查看官方文档的演示代码.

@github-actions github-actions bot locked and limited conversation to collaborators Dec 23, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants