bab-icon/resources/js/components/UiCheckbox.vue

<template>
    <el-row class="form-group">
        <el-col :span="3" style="min-height:50px;padding-top:10px;">
            <label style="margin-left:10px;vertical-align: middle;" class="control-label">{{label ? label : 'CheckBox'}}</label>
        </el-col>
        <el-col :span="14">
            <div class=".layui-input-block-my">
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <br>
                <el-checkbox-group
                    v-model="checkedbox"
                    :size="params.group.size ? 'large' : 'small'"
                    :fill="params.group.fill ? params.group.fill : '#20a0ff'"
                    :text-color="params.group.textColor ? params.group.textColor : '#ffffff'"
                    :min="params.group.min ? params.group.min : 0"
                    :max="params.group.max ? params.group.max : 100"
                    @change="handleCheckedCitiesChange">
                    <el-checkbox
                        v-for="item in params.attr.checkboxs"
                        :key="item.value"
                        :name="params.attr.name ? params.attr.name : 'checkbox[]'"
                        :disable="item.disable ? true : false"
                        :checked="item.checked ? true : false"
                        :label="item.value" border>{{item.label}}
                    </el-checkbox>
                    &ensp;&ensp;&ensp;&ensp;
                </el-checkbox-group>
            </div>
        </el-col>
        <el-col :span="7">
            <div class="classJs">
                <div v-if="tips">
                    <span class="red">*</span>&ensp;{{tips}}
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        props: ['label','params','tips'],
        data() {
            return {
                checkAll: false,
                isIndeterminate: false,
                checkedbox: []
            }
        },
        mounted() {
            //> 判断当前是否是全选
            //> this.checkAll = true;
        },
        methods: {
            handleCheckAllChange(event) {
                console.log(event.target.checked);
                this.checkedbox = event.target.checked ? this.dataAll() : [];
                this.isIndeterminate = false;
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                let paramLength = this.params.attr.checkboxs.length;
                this.checkAll = checkedCount === paramLength;
                this.isIndeterminate = checkedCount > 0 && checkedCount < paramLength;
            },
            dataAll(){
                var _data = [];
                var _th = this.params.attr.checkboxs;
                var length = _th.length;
                for (var i = 0; i < length; ++i) {
                    if(!_th[i].disabled){
                        _data.push(_th[i].value);
                    }
                }
                console.log(_data);
                return _data;
            }
        }
    }
</script>

<style scoped>
    .el-checkbox__original {
        display: none;
    }
    .layui-input-block-my {
        margin-left:0;
        min-height: 42px;
    }
    .classJs {
        margin-left: 10px;
        vertical-align: middle;
        height:42px;
        line-height:42px;
    }
    .red{
        color: red;
    }
</style>