el-checkbox角色多选组件
封装组件checkbox,默认显示16个折叠展开形式
<template>
<div>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" class="myRedCheckBox">全部</el-checkbox>
<el-checkbox-group v-model="roleIds" fill="#916DFD" @change="handleCheckedCitiesChange">
<el-checkbox class="el-checkbox-width myRedCheckBox" v-for="item in showRoleList" :label="item.companyRoleId" :key="item.companyRoleId">{{ item.roleName }}</el-checkbox>
</el-checkbox-group>
<el-button type="text" v-if="controlVisible" @click="controlUnfoldBtn">展开</el-button>
<el-button type="text" v-else @click="controlFoldBtn">收起</el-button>
</div>
</template>
子组件数据展示
export default {
data() {
return {
isIndeterminate: true,
checkAll: false,
roleIds: [],
roleList: [],
showRoleList: [], //展示角色
partRoleList: [], //展示16个角色
controlVisible: true,
selectIds: [],
};
},
mounted() {
this.getRoleIds();
this.roleIds = this.userIds;
},
props: {
userIds: {
type: Array,
default: [],
},
placeId: {
type: Number,
default: 0
}
},
watch: {
roleIds: function (newVal, oldVal) {
this.$emit("sendRolesList", newVal);
},
userIds: function (newVal, oldVal) {
this.roleIds = newVal;
if (this.roleIds.length == 0 && this.roleList.length == 0 && this.roleIds.length === this.roleList.length) {
this.checkAll = false;
this.isIndeterminate = true;
} else if (this.roleIds.length === this.roleList.length) {
this.checkAll = true;
this.isIndeterminate = false;
} else {
this.checkAll = false;
this.isIndeterminate = true;
}
},
placeId: function (newVal, oldVal) {
this.getRoleIds();
}
},
computed: { ...mapGetters(["companyId"]) },
methods: {
// 获取角色
getRoleIds() {
GetRoleList({ companyId: this.companyId ? this.companyId : this.placeId })
.then((res) => {
this.roleList = res;
this.partRoleList = this.roleList.slice(0, 12);
this.showRoleList = this.partRoleList;
if (this.roleIds.length === this.roleList.length) {
this.checkAll = true;
this.isIndeterminate = false;
} else {
this.checkAll = false;
this.isIndeterminate = true;
}
})
.catch((e) => {
this.$message({
type: "error",
message: e.msg || "角色获取失败",
});
});
},
handleCheckAllChange(val) {
this.selectIds = [];
this.roleList.forEach((item) => {
this.selectIds.push(item.companyRoleId);
});
this.roleIds = val ? this.selectIds : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
this.selectIds = [];
this.roleList.forEach((item) => {
this.selectIds.push(item.companyRoleId);
});
let checkedCount = value.length;
this.checkAll = checkedCount === this.selectIds.length;
this.isIndeterminate =
checkedCount > 0 && checkedCount < this.selectIds.length;
},
// 展开
controlUnfoldBtn() {
this.controlVisible = false;
this.showRoleList = this.roleList;
},
// 折叠
controlFoldBtn() {
this.controlVisible = true;
this.showRoleList = this.partRoleList;
},
},
};
可根据自己需要修改样式
<style scoped lang='scss'>
.el-checkbox-width {
width: 150px; 每行放几个宽度
}
/* 设置带边框的checkbox,选中后边框的颜色 */
::v-deep .myRedCheckBox.is-bordered.is-checked {
border-color: #916dfd;
}
/* 设置选中后的文字颜色 */
::v-deep .myRedCheckBox .el-checkbox__input.is-checked + .el-checkbox__label {
color: #916dfd;
}
/* 设置选中后对勾框的边框和背景颜色 */
::v-deep .myRedCheckBox .el-checkbox__input.is-checked .el-checkbox__inner {
border-color: #916dfd;
background-color: #916dfd;
}
::v-deep
.myRedCheckBox
.el-checkbox__input.is-indeterminate
.el-checkbox__inner {
border-color: #916dfd;
background-color: #916dfd;
}
/* 设置checkbox获得焦点后,对勾框的边框颜色 */
::v-deep .myRedCheckBox .el-checkbox__input.is-focus .el-checkbox__inner {
border-color: #916dfd;
}
/* 设置鼠标经过对勾框,对勾框边框的颜色 */
::v-deep .myRedCheckBox .el-checkbox__inner:hover {
border-color: #916dfd;
}
</style>
使用该组件
<ShowRoles :placeId="id" :userIds="roleIds" @sendRolesList="getRoleUserIds"></ShowRoles>
export default {
data() {
return {
roleIds: [],
id: ''
};
},
methods: {
getRoleUserIds(val) {
this.roleIds = val;
},
},
};