Pits encountered in the use of El checkbox group

 What you want to achieve  el-checkbox-group  multi-select 、 Form validation required 

<!--  Error code  -->
<el-dialog
  title=" Configuration details "
  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=" Account combination " 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 structure 
data () {
    return {
		configInfo: {
			checkedSubjectIdList: [], //  Account combination id
		},
		subjectList:[
			{subjectId:'1',subjectName:'abc'},
			{subjectId:'2',subjectName:'cde'}
		],
	rules: {
			checkedSubjectIdList: [{type:'array',required: true, message: ' Mandatory ', trigger: 'change'}],
		}
	}
}

      Error reason , It seems that the data structure is deep ,<el-checkbox-group v-model="configInfo.checkedSubjectIdList"> hold checkedSubjectIdList Take it out alone , Do not nest , To such <el-checkbox-group v-model="checkedSubjectIdList">,:required="true" In order to label There is ‘*’, because checkedSubjectIdList  be not in form  The binding of  configInfo Inside ,rules Also on the checkedSubjectIdList  useless , So I have to submit it manually if(this.checkedSubjectIdList.length === 0) Judging empty arrays （（ Make do with ......））.

<!--  Corrected code  -->
<el-dialog
  title=" Configuration details "
  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=" Account combination " :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 structure 
data () {
    return {
		configInfo: {
			
		},
        checkedSubjectIdList: [], //  Account combination id
		subjectList:[
			{subjectId:'1',subjectName:'abc'},
			{subjectId:'2',subjectName:'cde'}
		],
	rules: {
			
		}
	}
}