el-checkbox角色多选组件

最新推荐文章于 2024-05-16 03:01:14 发布

@草莓小布丁

最新推荐文章于 2024-05-16 03:01:14 发布

阅读量573

点赞数 6

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_52441253/article/details/135472550

版权

文章介绍了如何在Vue项目中使用el-checkbox组件创建一个多选组件，支持默认展开16个选项并可通过控制按钮切换展开/折叠状态。组件还涉及了状态管理和父子组件通信的处理。

摘要由CSDN通过智能技术生成

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;
        },
    },
};