Vue el使用el-checkbox-group复选框进行单选框方式
作者：山空响不散
这篇文章主要介绍了Vue el使用el-checkbox-group复选框进行单选框方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue el 使用el-checkbox-group复选框进行单选框
让复选框进行单选框操作
el-checkbox-group这个组件与其他复选框不一样，我当初也是半天不知道怎么操作
页面使用v-model绑定 size就是等比例缩小放大，v-ror循环应该看的懂。
重要的是@chage到我们写的类
<el-checkbox-group v-model="checked" size="medium">
<el-checkbox-button v-for="city in cities" :label="city" :key="city" @change="checkbox(city)">{{ city }}
</el-checkbox-button>
</el-checkbox-group>
注意checked与v-model绑定了所以必须要有值不然整个都显示不出来，注意小细节
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
data () {
return {
checked: ['上海'],//不能为null，必须要有值
cities: cityOptions
};
}
}
经过我的踩坑，不能直接this.checked=[]或者等于null。因为绑定之后的数组里面有特定参数，也不能直接把this.checked=city
这就需要使用到“includes/包含”这个函数判断包含不包含，再用三运算符把当前值给进去
checkbox(city) {
this.checked = this.checked.includes(city) ? [city] : [];
},
题外话
三运运算符 ？问号左边的是判断结果为true或false，只有？问号左边为布尔值才能跳到右边，如果为true就按循序得第一个[city] 为false就第二个
三元运算符 a ? b : c;
可以理解简化为
if(a){ a=b; }
else{ a=c }
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。