@visactor/vue-vtable/es/hooks/useEditorRender.js

The vue version of VTable

import { getCurrentInstance, computed, watchEffect, onBeforeUnmount } from 'vue';
import { isArray, isObject, isValid } from '@visactor/vutils';
import { checkRenderEditor, getRenderEditor, getRenderEditorColumnKeyField } from '../edit/util.js';

/**
 * 编辑渲染器
 * @param props
 * @param tableRef
 */
function useEditorRender(props, tableRef) {
    /** 当前实例 */
    const instance = getCurrentInstance();
    /** 需要渲染编辑器的列 */
    const validColumns = computed(() => {
        var _a;
        const columns = flattenColumns(((_a = props.options) === null || _a === void 0 ? void 0 : _a.columns) || []);
        if (!isArray(columns)) {
            return [];
        }
        return columns.filter(col => !!isObject(col) && !!checkRenderEditor(col));
    });
    watchEffect(() => {
        resolveRenderEditor();
    });
    onBeforeUnmount(() => {
        releaseRenderEditor();
    });
    /**
     * @description: 动态渲染式编辑器
     * @return {*}
     */
    function resolveRenderEditor() {
        const id = getTableId();
        if (!isValid(id)) {
            return;
        }
        // 移除原本已存在的编辑器
        let renderEditor = getRenderEditor();
        if (renderEditor) {
            renderEditor.removeNode(id);
        }
        else if (validColumns.value.length > 0) {
            // 注册编辑器
            renderEditor = getRenderEditor(true, instance === null || instance === void 0 ? void 0 : instance.appContext);
        }
        validColumns.value.forEach(column => {
            const { getEditCustomNode } = column;
            const key = getRenderEditorColumnKeyField(column);
            renderEditor.registerNode(id, key, getEditCustomNode);
            delete column.editCustomNode;
        });
    }
    /**
     * @description: 释放动态渲染式编辑器
     * @return {*}
     */
    function releaseRenderEditor() {
        const id = getTableId();
        if (!isValid(id)) {
            return;
        }
        const renderEditor = getRenderEditor();
        renderEditor === null || renderEditor === void 0 ? void 0 : renderEditor.release(id);
    }
    /**
     * @description: 获取表格 id
     * @return {*}
     */
    function getTableId() {
        var _a;
        return (_a = tableRef.value) === null || _a === void 0 ? void 0 : _a.id;
    }
}
/**
 * @description: 获取所有扁平化的 columns
 * @param {any} columns
 */
function flattenColumns(columns) {
    return columns.flatMap(column => (Array.isArray(column.columns) ? flattenColumns(column.columns) : column));
}

export { useEditorRender };