实际开发中,如何使用ElementUI实现复选框的全选和不选
项目需求:复选框按钮样式实现全选和全不选
前言
本项目是基于,ant-design for Vue的UI库, 是没有按钮样式的多选框组件的,所以引用了ElementUI库的复选框组件
ElementUI的复选框组件使用事项
官网样例如下
注意:官网使用的是:按钮组,无法使用indeterminate属性进行全选全不选的样式控制。
所以不能使用 按钮组来实现按钮样式的 带全选的复选框
官网表明,全选的样式控制 是基于checkbox的,而不是 checkbox-button
最终实现如下:
<template>
<div id="check-box">
<el-checkbox size="small" style="margin-right: 30px;height: 40px;padding: 0px 14.5px;line-height: 40px;" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全部({{total}})</el-checkbox>
// 这里也必须使用checkbox 才能应用indeterminate属性
<el-checkbox-group v-model="checkedTags" @change="handleCheckedCitiesChange">
<el-checkbox size="small" v-for="tag in tags" :label="tag.id" :key="tag.id" >{{tag.value}}({{tag.count}})</el-checkbox>
</el-checkbox-group>
</div>
</template>
<script>
export default {
props : ['total','tags'],
data() {
return {
checkAll: true,
checkedTags: [], // 收集的值和label保持一致
isIndeterminate: true
};
},
watch : {
tags() {
this.checkedTags = this.tags.map(item=>item.id);
}
},
methods: {
handleCheckAllChange(val) {
this.checkedTags = val ? this.tags.map(item=>item.id) : [];
this.isIndeterminate = false;
this.$emit('checkedAll',this.checkedTags)
},
handleCheckedCitiesChange(value) {
// 这里收集的是el-checkbox label属性值
this.checkedTags = value;
this.$emit('checkedItem',this.checkedTags)
let checkedCount = value.length;
this.checkAll = checkedCount === this.tags.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.tags.length;
}
},
mounted() {
this.checkedTags = this.tags.map(item=>item.id);
}
};
</script>
<style scoped>
#check-box {
display: flex;
}
</style>
<style>
.el-checkbox__input {
display: none;
}
.el-checkbox__label {
padding-left: 6px;
}
.el-button+.el-button, .el-checkbox.is-bordered+.el-checkbox.is-bordered {
margin-left: 0px;
}
.el-checkbox {
background: #F2F5F7;
border-radius: 2px;
padding: 9.5px 14.5px;
margin-bottom: 30px;
}
.el-checkbox.is-checked {
background: rgba(64, 140, 255, 0.1);
}
</style>