想实现的功能 el-checkbox-group 多选、表单验证必选
<!-- 报错代码 -->
<el-dialog
title="配置详情"
width="395px"
center
>
<el-form
:model="configInfo"
id="form"
ref="form"
:rules="rules"
size="small"
label-position="right"
label-width="120px"
>
<el-form-item label="科目组合" prop="checkedSubjectIdList">
<el-checkbox-group v-model="configInfo.checkedSubjectIdList">
<el-checkbox v-for="(item,index) in subjectList"
:key="item.subjectId"
:label="item.subjectId"
:class="index%2===1 ? 'cfr':''"
>{{item.subjectName}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
</el-dialog>
// data结构
data () {
return {
configInfo: {
checkedSubjectIdList: [], // 科目组合id
},
subjectList:[
{subjectId:'1',subjectName:'abc'},
{subjectId:'2',subjectName:'cde'}
],
rules: {
checkedSubjectIdList: [{type:'array',required: true, message: '必选', trigger: 'change'}],
}
}
}
报错原因,好像是数据结构深,把checkedSubjectIdList单独拿出来,不嵌套,改成这样,:required="true"是为了label前面有‘*’,因为checkedSubjectIdList不在form绑定的configInfo里面,rules也对checkedSubjectIdList没用了,所以我只有在提交时手动if(this.checkedSubjectIdList.length === 0)判断空数组((将就用…))。
<!-- 改正后代码 -->
<el-dialog
title="配置详情"
width="395px"
center
>
<el-form
:model="configInfo"
id="form"
ref="form"
:rules="rules"
size="small"
label-position="right"
label-width="120px"
>
<el-form-item label="科目组合" :required="true">
<el-checkbox-group v-model="checkedSubjectIdList">
<el-checkbox v-for="(item,index) in subjectList"
:key="item.subjectId"
:label="item.subjectId"
:class="index%2===1 ? 'cfr':''"
>{{item.subjectName}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
</el-dialog>
// data结构
data () {
return {
configInfo: {
},
checkedSubjectIdList: [], // 科目组合id
subjectList:[
{subjectId:'1',subjectName:'abc'},
{subjectId:'2',subjectName:'cde'}
],
rules: {
}
}
}