vbenjs / vue-vben-admin

A modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. It's fast!
https://www.vben.pro
MIT License
24.36k stars 6.64k forks source link

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

Open CHUZHI-L opened 3 hours ago

CHUZHI-L commented 3 hours ago

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

`

<template #radioGroup="slotProps">

Option A Option B Option C
  </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 commented 3 hours ago

1

zhuizhubf commented 1 hour ago

没有设置配置默认值 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 commented 51 minutes ago

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