vxe-table-demonic/es/checkbox/src/group.js

一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...

import { defineComponent, h, provide, computed, inject } from 'vue';
import GlobalConfig from '../../v-x-e-table/src/conf';
import XEUtils from 'xe-utils';
import { useSize } from '../../hooks/size';
export default defineComponent({
    name: 'VxeCheckboxGroup',
    props: {
        modelValue: Array,
        disabled: Boolean,
        max: { type: [String, Number], default: null },
        size: { type: String, default: function () { return GlobalConfig.checkbox.size || GlobalConfig.size; } }
    },
    emits: [
        'update:modelValue',
        'change'
    ],
    setup: function (props, context) {
        var slots = context.slots, emit = context.emit;
        var $xeform = inject('$xeform', null);
        var $xeformiteminfo = inject('$xeformiteminfo', null);
        var xID = XEUtils.uniqueId();
        var computeIsMaximize = computed(function () {
            var modelValue = props.modelValue, max = props.max;
            if (max) {
                return (modelValue ? modelValue.length : 0) >= XEUtils.toNumber(max);
            }
            return false;
        });
        var computeMaps = {
            computeIsMaximize: computeIsMaximize
        };
        var $xecheckboxgroup = {
            xID: xID,
            props: props,
            context: context,
            getComputeMaps: function () { return computeMaps; }
        };
        useSize(props);
        var checkboxGroupMethods = {
            dispatchEvent: function (type, params, evnt) {
                emit(type, Object.assign({ $checkboxGroup: $xecheckboxgroup, $event: evnt }, params));
            }
        };
        var checkboxGroupPrivateMethods = {
            handleChecked: function (params, evnt) {
                var checked = params.checked, label = params.label;
                var checklist = props.modelValue || [];
                var checkIndex = checklist.indexOf(label);
                if (checked) {
                    if (checkIndex === -1) {
                        checklist.push(label);
                    }
                }
                else {
                    checklist.splice(checkIndex, 1);
                }
                emit('update:modelValue', checklist);
                $xecheckboxgroup.dispatchEvent('change', Object.assign({ checklist: checklist }, params), evnt);
                // 自动更新校验状态
                if ($xeform && $xeformiteminfo) {
                    $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, checklist);
                }
            }
        };
        Object.assign($xecheckboxgroup, checkboxGroupMethods, checkboxGroupPrivateMethods);
        var renderVN = function () {
            return h('div', {
                class: 'vxe-checkbox-group'
            }, slots.default ? slots.default({}) : []);
        };
        $xecheckboxgroup.renderVN = renderVN;
        provide('$xecheckboxgroup', $xecheckboxgroup);
        return renderVN;
    }
});