用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 || []
};