el-checkbox-group 使用遇到的坑

想实现的功能 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'}],
		}
	}
}

     报错原因,好像是数据结构深,<el-checkbox-group v-model="configInfo.checkedSubjectIdList">把checkedSubjectIdList单独拿出来,不嵌套,改成这样<el-checkbox-group v-model="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: {
			
		}
	}
}
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值