背景：
在使用ElementUI进行项目开发过程中，有一次需要实现如下样式，是一个筛选，肯定不能用复选框，看样式和ElementUI的el-radio不太一样，反而和el-checkbox的样式一样，那我们可以直接把el-checkbox当做el-radio来用吗？
-97ace004e8c042468bad5943526a80c0.png)
尝试：
试了一下，发现不能直接用，和radio的需求相差很多，主要暴露出以下问题：
- el-checkbox对对象类型的绑定支持不友好；
- el-checkbox无法实现单选功能；
- el-checkbox选择后可以取消；
解决方案：
既然知道了有这些问题，那我们直接解决掉就可以了
- 让el-checkbox支持对象类型的绑定
经过尝试和搜索，发现可以使用以下方式支持
<el-checkbox-group class="types" v-model="typeValue" @change="typesChange">
<el-checkbox
v-for="(itm, idx) in typeList"
:key="idx"
:label="itm.value"
>{{ itm.label }}</el-checkbox
>
</el-checkbox-group>
- 让el-checkbox实现单选功能
经过尝试，发现可以在不修改原有绑定形式的情况下，在chang事件中进行处理，如下：
typesChange(data) {
//关键代码，typeValue数组里的个数大于1个就移除前一个
this.typeValue.length > 1 ? this.typeValue.shift() : null;
this.param.type = this.typeValue.join('');
this.getData(1);
}
- 让el-checkbox选择后无法取消，和radio表现一致
这里我思考了一下，最开始想通过事件的方式处理，但是觉得会比较麻烦，后来看到disabled这个属性，心想是不是可以直接用这个disabled的状态来阻止被选中的item再次点击呢？
:disabled="itm.value == typeValue.join('')"
直接添加disabled，如果当前值和选择的值一样就禁用。
我尝试了一下，果然可以。
<el-checkbox-group class="types" v-model="typeValue" @change="typesChange">
<el-checkbox
v-for="(itm, idx) in typeList"
:key="idx"
:label="itm.value"
:disabled="itm.value == param.type"
>{{ itm.label }}</el-checkbox
>
</el-checkbox-group>
只是disabled的样式是灰色的，这个和需求不符，简单。。。
我们直接用选中的样式来覆盖它不就完了，Bingo
.types {
height: 50px;
line-height: 50px;
/deep/.el-checkbox.is-disabled {
.el-checkbox__input {
&.is-checked {
& + .el-checkbox__label {
cursor: default;
color: #368fff;
}
.el-checkbox__inner {
cursor: default;
background-color: #368fff;
border-color: #368fff;
&::after {
cursor: default;
border-color: #fff;
}
}
}
}
}
}
好啦，el-checkbox转el-radio的需求已经实现了。
有时候el-checkbox可能有中间状态，用来配合checkbox-group处理全选，如果不需要，直接干掉，indeterminate给false即可。
完整代码如下：
<template>
<div class="filters">
<el-checkbox-group class="types" v-model="typeValue" @change="typesChange">
<el-checkbox
v-for="(itm, idx) in typeList"
:key="idx"
:label="itm.value"
:disabled="itm.value == param.type"
>{{ itm.label }}</el-checkbox
>
</el-checkbox-group>
</div>
</template>
<script>
export default {
data() {
return {
param: {
type: ''
},
typeValue: [''],
typeList: [
{
label: '全部',
value: ''
},
{
label: '文本',
value: 1
},
{
label: '课件',
value: 2
},
{
label: '视频',
value: 3
},
{
label: '音频',
value: 4
},
{
label: '图片',
value: 5
},
{
label: '其它',
value: 6
}
]
};
},
methods: {
typesChange(data) {
this.typeValue.length > 1 ? this.typeValue.shift() : null;
this.param.type = this.typeValue.join('');
console.log('选择的类型值：', this.param.type);
}
}
};
</script>
<style lang="less" scoped>
.filters {
.types {
height: 50px;
line-height: 50px;
/deep/.el-checkbox.is-disabled {
.el-checkbox__input {
&.is-checked {
& + .el-checkbox__label {
cursor: default;
color: #368fff;
}
.el-checkbox__inner {
cursor: default;
background-color: #368fff;
border-color: #368fff;
&::after {
cursor: default;
border-color: #fff;
}
}
}
}
}
}
}
</style>
评论区