如何实现el-select多选下拉框中嵌套复选框并加校验不为空功能呢？
要实现的效果图
选择部分品牌但不选选项效果
问题概述
相信大家看到上面的两张图片后，在脑子里多少会有一些实现思路，这是我最近在开发中遇到的一个小功能，本来看起来挺简单的，愣是控了我两个小时。立马有了一个记录下来的想法，以保证以后遇到一样的问题不被控。
下面我来说一下，我在做这个功能时遇到的一些问题。
第一个问题，el-select组件如何跟el-checkbox组件无缝衔接呢？
第二个问题，如何给这个form表单加校验呢？
实现方案
- 通过自定义下拉框内容嵌套复选框组件
- 通过@click.stop阻止下拉框中的原来的点击事件
- 通过自定义校验规则实现选择部分品牌时，下拉框不能为空功能
el-select组件与el-checkbox组件无缝衔接
实现代码如下：
javascript
<el-radio-group style="margin-bottom: 10px" v-model="radio">
<el-radio label="all">全部品牌</el-radio>
<el-radio label="part">部分品牌</el-radio>
</el-radio-group>
<el-select
v-if="radio === 'part'"
v-model="brandList"
multiple
placeholder="请选择品牌"
>
<el-checkbox-group
v-model="brandList"
@change="handleBrandChecked"
>
<el-option
v-for="item in brandOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
<div @click.stop>
<el-checkbox :label="item.value">{{ item.label }}</el-checkbox>
</div>
</el-option>
</el-checkbox-group>
</el-select>温馨提示：一定要记得在data和methods中定义所需要的数据和方法哦
代码如下：
javascript
<script>
export 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表单加自定义校验规则
最终代码如下：
javascript
<el-form label-position="top" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px">
<el-form-item label="授权品牌" prop="licensingBrand">
<el-radio-group style="margin-bottom: 10px" v-model="ruleForm.licensingBrand">
<el-radio label="all">全部品牌</el-radio>
<el-radio label="part">部分品牌</el-radio>
</el-radio-group>
<el-select v-if="ruleForm.licensingBrand === 'part'" v-model="brandList" multiple placeholder="请选择品牌">
<el-checkbox-group v-model="brandList" @change="handleBrandChecked">
<el-option v-for="item in brandOptions" :key="item.value" :label="item.label" :value="item.value">
<div @click.stop>
<el-checkbox :label="item.value">{{ item.label }}</el-checkbox>
</div>
</el-option>
</el-checkbox-group>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
<script>
export 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>到此，想要的效果就实现了。
有需要的朋友，拿走不谢
咱们下次再见。