element plus el-checkbox 无法选中问题

supming12024-10-24 11:25

用element plus 的el-checkbox-group 和 el-checkbox开发表单的多选，今天发现赋值后没法选中，代码如下：

仅截取部分相关代码

<template>
    <el-form
      :model="form"
    >
        <el-form-item label="质量体系认证：" prop="qualitySystem">
            <el-checkbox-group v-model="form.qualitySystem">
               <el-checkbox label="GMP" value="GMP" />
                <el-checkbox label="GSP" value="GSP" />
                <el-checkbox label="ISO9000" value="ISO9000" />
             </el-checkbox-group>
         </el-form-item>
    </el-form>
</template>

<script setup>
const props = defineProps({
  initData: {
    type: Object,
  }
})

watchEffect(() => {
  const {
    qualitySystem,
  } = props.initData; 

  form.value = {
    qualitySystem: qualitySystem
  };
});
</script>

你会发现，点击checbox没办法选中。

经排查，发现可能是qualitySystem 是undefined，导致无法选中。

解决方法如下：

form.value = {
    qualitySystem: qualitySystem || []
};