vxe-table-ro-test/es/table/module/custom/hook.js

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

import { nextTick } from 'vue';
import { VxeUI } from '../../../ui';
import XEUtils from 'xe-utils';
const tableCustomMethodKeys = ['openCustom', 'closeCustom'];
VxeUI.hooks.add('tableCustomModule', {
    setupTable($xeTable) {
        const { reactData, internalData } = $xeTable;
        const { computeCustomOpts } = $xeTable.getComputeMaps();
        const { refElem } = $xeTable.getRefMaps();
        const $xeGrid = $xeTable.xegrid;
        const calcMaxHeight = () => {
            const { customStore } = reactData;
            const el = refElem.value;
            // 判断面板不能大于表格高度
            let tableHeight = 0;
            if (el) {
                tableHeight = el.clientHeight - 28;
            }
            customStore.maxHeight = Math.max(4, tableHeight);
        };
        const openCustom = () => {
            const { initStore, customStore } = reactData;
            const { collectColumn } = internalData;
            const sortMaps = {};
            const fixedMaps = {};
            const visibleMaps = {};
            XEUtils.eachTree(collectColumn, column => {
                const colid = column.getKey();
                column.renderFixed = column.fixed;
                column.renderVisible = column.visible;
                column.renderResizeWidth = column.renderWidth;
                sortMaps[colid] = column.renderSortNumber;
                fixedMaps[colid] = column.fixed;
                visibleMaps[colid] = column.visible;
            }, { children: 'children' });
            customStore.oldSortMaps = sortMaps;
            customStore.oldFixedMaps = fixedMaps;
            customStore.oldVisibleMaps = visibleMaps;
            reactData.customColumnList = collectColumn.slice(0);
            customStore.visible = true;
            initStore.custom = true;
            checkCustomStatus();
            calcMaxHeight();
            return nextTick().then(() => calcMaxHeight());
        };
        const closeCustom = () => {
            const { customStore } = reactData;
            const customOpts = computeCustomOpts.value;
            if (customStore.visible) {
                customStore.visible = false;
                if (!customOpts.immediate) {
                    $xeTable.handleCustom();
                }
            }
            return nextTick();
        };
        const customMethods = {
            openCustom,
            closeCustom
        };
        const checkCustomStatus = () => {
            const { customStore } = reactData;
            const { collectColumn } = internalData;
            const customOpts = computeCustomOpts.value;
            const { checkMethod } = customOpts;
            customStore.isAll = collectColumn.every((column) => (checkMethod ? !checkMethod({ column }) : false) || column.renderVisible);
            customStore.isIndeterminate = !customStore.isAll && collectColumn.some((column) => (!checkMethod || checkMethod({ column })) && (column.renderVisible || column.halfVisible));
        };
        const emitCustomEvent = (type, evnt) => {
            const comp = $xeGrid || $xeTable;
            comp.dispatchEvent('custom', { type }, evnt);
        };
        const customPrivateMethods = {
            checkCustomStatus,
            emitCustomEvent,
            triggerCustomEvent(evnt) {
                const { customStore } = $xeTable.reactData;
                if (customStore.visible) {
                    closeCustom();
                    emitCustomEvent('close', evnt);
                }
                else {
                    customStore.btnEl = evnt.target;
                    openCustom();
                    emitCustomEvent('open', evnt);
                }
            },
            customOpenEvent(evnt) {
                const { customStore } = reactData;
                if (!customStore.visible) {
                    customStore.activeBtn = true;
                    customStore.btnEl = evnt.target;
                    $xeTable.openCustom();
                    $xeTable.emitCustomEvent('open', evnt);
                }
            },
            customCloseEvent(evnt) {
                const { customStore } = reactData;
                if (customStore.visible) {
                    customStore.activeBtn = false;
                    $xeTable.closeCustom();
                    $xeTable.emitCustomEvent('close', evnt);
                }
            }
        };
        return Object.assign(Object.assign({}, customMethods), customPrivateMethods);
    },
    setupGrid($xeGrid) {
        return $xeGrid.extendTableMethods(tableCustomMethodKeys);
    }
});