手机网站程序下载,wordpress写文章500,苏州智信建设职业培训网站,网站开发赚钱吗?如何实现el-select多选下拉框中嵌套复选框并加校验不为空功能呢#xff1f; 要实现的效果图选择部分品牌但不选选项效果问题概述实现方案el-select组件与el-checkbox组件无缝衔接给form表单加自定义校验规则 要实现的效果图 选择部分品牌但不选选项效果 问题概述
相信大家看到… 如何实现el-select多选下拉框中嵌套复选框并加校验不为空功能呢 要实现的效果图选择部分品牌但不选选项效果问题概述实现方案el-select组件与el-checkbox组件无缝衔接给form表单加自定义校验规则 要实现的效果图 选择部分品牌但不选选项效果 问题概述
相信大家看到上面的两张图片后在脑子里多少会有一些实现思路这是我最近在开发中遇到的一个小功能本来看起来挺简单的愣是控了我两个小时。立马有了一个记录下来的想法以保证以后遇到一样的问题不被控。 下面我来说一下我在做这个功能时遇到的一些问题。 第一个问题el-select组件如何跟el-checkbox组件无缝衔接呢 第二个问题如何给这个form表单加校验呢
实现方案
通过自定义下拉框内容嵌套复选框组件通过click.stop阻止下拉框中的原来的点击事件通过自定义校验规则实现选择部分品牌时下拉框不能为空功能
el-select组件与el-checkbox组件无缝衔接
实现代码如下
el-radio-group stylemargin-bottom: 10px v-modelradioel-radio labelall全部品牌/el-radioel-radio labelpart部分品牌/el-radio
/el-radio-group
el-selectv-ifradio partv-modelbrandListmultipleplaceholder请选择品牌
el-checkbox-groupv-modelbrandListchangehandleBrandCheckedel-optionv-foritem in brandOptions:keyitem.value:labelitem.label:valueitem.valuediv click.stopel-checkbox :labelitem.value{{ item.label }}/el-checkbox/div/el-option/el-checkbox-group
/el-select温馨提示一定要记得在data和methods中定义所需要的数据和方法哦 代码如下
scriptexport default {data() {return {// 单选框绑定值radio: ,// 品牌绑定值brandList: [],// 品牌选项brandOptions: [{value: option1,label: 选项1,},{value: option2,label: 选项2,},{value: option3,label: 选项3,},],};},methods: {handleBrandChecked(val) {console.log(val);}}}
/script给form表单加自定义校验规则
最终代码如下
el-form label-positiontop :modelruleForm status-icon :rulesrules refruleForm label-width100pxel-form-item label授权品牌 proplicensingBrandel-radio-group stylemargin-bottom: 10px v-modelruleForm.licensingBrandel-radio labelall全部品牌/el-radioel-radio labelpart部分品牌/el-radio/el-radio-groupel-select v-ifruleForm.licensingBrand part v-modelbrandList multiple placeholder请选择品牌el-checkbox-group v-modelbrandList changehandleBrandCheckedel-option v-foritem in brandOptions :keyitem.value :labelitem.label :valueitem.valuediv click.stopel-checkbox :labelitem.value{{ item.label }}/el-checkbox/div/el-option/el-checkbox-group/el-select/el-form-itemel-form-itemel-button typeprimary clicksubmitForm(ruleForm)提交/el-buttonel-button clickresetForm(ruleForm)重置/el-button/el-form-item
/el-form
scriptexport default {data() {var checkLicensingBrand (rule, value, callback) {if(value part){if(this.brandList.length 0){callback(new Error(请选择授权品牌));}else{callback();}}else{callback();}};return {ruleForm: {licensingBrand: ,},rules: {licensingBrand: [{ required: true, message: 请选中授权品牌, trigger: [blur, change] },{ validator: checkLicensingBrand, trigger: change }],},// 品牌绑定值brandList: [],// 品牌选项brandOptions: [{value: option1,label: 选项1,},{value: option2,label: 选项2,},{value: option3,label: 选项3,},],};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) {if (valid) {alert(submit!);} else {console.log(error submit!!);return false;}});},resetForm(formName) {this.brandList [];this.$refs[formName].resetFields();}}}
/script到此想要的效果就实现了。 有需要的朋友拿走不谢 咱们下次再见。
