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: form组件使用element-plus的CheckboxGroup存在选中问题 #4504

Closed
5 tasks done
CHUZHI-L opened this issue Sep 25, 2024 · 3 comments
Closed
5 tasks done

Bug: form组件使用element-plus的CheckboxGroup存在选中问题 #4504

CHUZHI-L opened this issue Sep 25, 2024 · 3 comments

Comments

@CHUZHI-L
Copy link
Contributor

Version

Vben Admin V5

Describe the bug?

form组件使用element-plus库时,CheckboxGroup没有选中效果,但实际的选项值已经选中,且无法取消选中,单独使用elCheckbox时正常,RadioGroup也正常,在checkbox首次点击时,warn: Invalid prop: type check failed for prop "modelValue". Expected Array, got String with value "XXX".

Reproduction

<Form> <template #radioGroup="slotProps"> <el-radio-group v-bind="slotProps"> <el-radio :value="3">Option A</el-radio> <el-radio :value="6">Option B</el-radio> <el-radio :value="9">Option C</el-radio> </el-radio-group> </template> <template #checkboxGroup="slotProps"> <el-checkbox-group v-bind="slotProps"> <el-checkbox label="Option D" value="Value D" /> <el-checkbox label="Option E" value="Value E" /> <el-checkbox label="Option F" value="Value F" /> </el-checkbox-group> </template> <template #checkbox="slotProps"> <el-checkbox label="我已阅读并同意" v-bind="slotProps" /> </template> </Form> schema: [ { component: 'RadioGroup', fieldName: 'radioGroup', label: '单选组', rules: 'selectRequired', }, { component: 'CheckboxGroup', fieldName: 'checkboxGroup', label: '多选组', rules: 'selectRequired', }, { component: 'Checkbox', fieldName: 'checkbox', label: '', defaultValue: false, renderComponentContent: () => { return { default: () => ['我已阅读并同意'], }; }, rules: 'selectRequired', }, ]

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 13th Gen Intel(R) Core(TM) i5-13400
    Memory: 4.87 GB / 15.67 GB
  Binaries:
    Node: 20.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.8.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.7.1 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
    Chrome: 129.0.6668.71

Relevant log output

No response

Validations

@CHUZHI-L
Copy link
Contributor Author

1

@zhuizhubf
Copy link
Contributor

没有设置配置默认值
https://doc.vben.pro/components/common-ui/vben-form.html

element-plus 的值类似

  config: {
    // ant design vue组件库默认都是 v-model:value
    baseModelPropName: 'value',

    // 一些组件是 v-model:checked 或者 v-model:fileList
    modelPropNameMap: {
      Checkbox: 'checked',
      Radio: 'checked',
      Switch: 'checked',
      Upload: 'fileList',
    },
  },

@CHUZHI-L
Copy link
Contributor Author

已解决,需要设置 baseModelPropName: 'value', 谢谢!

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

No branches or pull requests

3 participants