From e6aa3b131d8ce7b382c2962887ff66a412ec92ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E6=9D=A8=E6=9E=9A?= Date: Fri, 21 Mar 2025 19:38:07 +0800 Subject: [PATCH 1/2] fix: duplicate registration verification of VTableVueAttributePlugin --- .../custom/vtable-vue-attribute-plugin.ts | 11 ++--------- .../vue-vtable/src/hooks/useCellRender.ts | 19 ++++++++++++++----- 2 files changed, 16 insertions(+), 14 deletions(-) diff --git a/packages/vue-vtable/src/components/custom/vtable-vue-attribute-plugin.ts b/packages/vue-vtable/src/components/custom/vtable-vue-attribute-plugin.ts index e772cf399..ef15380ca 100644 --- a/packages/vue-vtable/src/components/custom/vtable-vue-attribute-plugin.ts +++ b/packages/vue-vtable/src/components/custom/vtable-vue-attribute-plugin.ts @@ -2,7 +2,7 @@ * @Author: lym * @Date: 2025-02-24 09:32:53 * @LastEditors: lym - * @LastEditTime: 2025-03-21 14:22:18 + * @LastEditTime: 2025-03-21 19:05:30 * @Description: */ import type { @@ -33,6 +33,7 @@ import { render } from 'vue'; * 表格自定义组件集成插件 */ export class VTableVueAttributePlugin extends HtmlAttributePlugin implements IPlugin { + name: string = 'VTableVueAttributePlugin'; declare htmlMap: Record< string, { @@ -130,15 +131,7 @@ export class VTableVueAttributePlugin extends HtmlAttributePlugin implements IPl if (!targetMap || !this.checkDom(targetMap.wrapContainer)) { const { wrapContainer, nativeContainer } = this.getWrapContainer(stage, actualContainer, { id, options }); if (wrapContainer) { - // 检查历史渲染节点 - const historyWrapContainer = document.getElementById(id); const dataRenderId = `${this.renderId}`; - if (historyWrapContainer && historyWrapContainer.getAttribute('data-vue-renderId') !== dataRenderId) { - // 历史渲染节点清除 - render(null, historyWrapContainer); - historyWrapContainer.remove(); - this.removeWrapContainerEventListener(historyWrapContainer); - } wrapContainer.id = id; wrapContainer.setAttribute('data-vue-renderId', dataRenderId); render(element, wrapContainer); diff --git a/packages/vue-vtable/src/hooks/useCellRender.ts b/packages/vue-vtable/src/hooks/useCellRender.ts index e2ed2f527..f380f2328 100644 --- a/packages/vue-vtable/src/hooks/useCellRender.ts +++ b/packages/vue-vtable/src/hooks/useCellRender.ts @@ -1,6 +1,7 @@ import type { Ref } from 'vue'; import { getCurrentInstance, watchEffect } from 'vue'; import { VTableVueAttributePlugin } from '../components/custom/vtable-vue-attribute-plugin'; +import { isArray } from '@visactor/vutils'; /** * 自定义单元格渲染器 @@ -10,15 +11,23 @@ import { VTableVueAttributePlugin } from '../components/custom/vtable-vue-attrib export function useCellRender(props: any, tableRef: Ref) { /** 当前实例 */ const instance = getCurrentInstance(); + /** 自定义 dom 开关 */ + const createReactContainer = props?.options?.customConfig?.createReactContainer; + watchEffect(() => { - if (!props?.options?.customConfig?.createReactContainer) { - // 未开启自定义容器 + if (!createReactContainer) { + return; + } + const pluginService = tableRef.value?.scenegraph?.stage?.pluginService; + if (!pluginService) { return; } - if (!tableRef.value) { + + const exist = pluginService.findPluginsByName('VTableVueAttributePlugin'); + if (isArray(exist) && !!exist.length) { return; } - // 注册 vtable-vue 自定义组件集成插件 - tableRef.value.scenegraph.stage.pluginService.register(new VTableVueAttributePlugin(instance?.appContext)); + const plugin = new VTableVueAttributePlugin(instance?.appContext); + pluginService.register(plugin); }); } From 0c19d3509246d1d6382ea9529e83c2ced2f33453 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E6=9D=A8=E6=9E=9A?= Date: Fri, 21 Mar 2025 19:44:33 +0800 Subject: [PATCH 2/2] perf: supports the transmission of context --- .../custom/vtable-vue-attribute-plugin.ts | 21 ++++++++++++------- packages/vue-vtable/src/edit/editor.ts | 15 ++++++++----- 2 files changed, 23 insertions(+), 13 deletions(-) diff --git a/packages/vue-vtable/src/components/custom/vtable-vue-attribute-plugin.ts b/packages/vue-vtable/src/components/custom/vtable-vue-attribute-plugin.ts index ef15380ca..3903ba54f 100644 --- a/packages/vue-vtable/src/components/custom/vtable-vue-attribute-plugin.ts +++ b/packages/vue-vtable/src/components/custom/vtable-vue-attribute-plugin.ts @@ -2,7 +2,7 @@ * @Author: lym * @Date: 2025-02-24 09:32:53 * @LastEditors: lym - * @LastEditTime: 2025-03-21 19:05:30 + * @LastEditTime: 2025-03-21 19:38:26 * @Description: */ import type { @@ -126,7 +126,7 @@ export class VTableVueAttributePlugin extends HtmlAttributePlugin implements IPl targetMap = null; } // 校验并传递上下文 - this.checkToPassAppContext(element); + this.checkToPassAppContext(element, graphic); // 渲染或更新 Vue 组件 if (!targetMap || !this.checkDom(targetMap.wrapContainer)) { const { wrapContainer, nativeContainer } = this.getWrapContainer(stage, actualContainer, { id, options }); @@ -176,14 +176,19 @@ export class VTableVueAttributePlugin extends HtmlAttributePlugin implements IPl /** * @description: 校验并传递上下文 * @param {VNode} vnode + * @param {IGraphic} graphic * @return {*} */ - checkToPassAppContext(vnode: VNode) { - if (this.currentContext) { - try { - vnode.appContext = this.currentContext; - } catch (error) {} - } + checkToPassAppContext(vnode: VNode, graphic: IGraphic) { + try { + const { stage } = getTargetGroup(graphic); + const { table } = stage || {}; + const userAppContext = table?.options?.customConfig?.getVueUserAppContext?.() ?? this.currentContext; + // 简单校验合法性 + if (!!userAppContext?.components && !!userAppContext?.directives) { + vnode.appContext = userAppContext; + } + } catch (error) {} } /** * @description: 检查是否需要渲染 diff --git a/packages/vue-vtable/src/edit/editor.ts b/packages/vue-vtable/src/edit/editor.ts index aed5b2ed2..8f2b120a8 100644 --- a/packages/vue-vtable/src/edit/editor.ts +++ b/packages/vue-vtable/src/edit/editor.ts @@ -161,7 +161,7 @@ export class DynamicRenderEditor { if (!vnode || !isVNode(vnode)) { return false; } - this.checkToPassAppContext(vnode); + this.checkToPassAppContext(vnode, table); // 创建包裹容器 const wrapContainer = document.createElement('div'); wrapContainer.style.position = 'absolute'; @@ -183,12 +183,17 @@ export class DynamicRenderEditor { /** * @description: 校验并传递上下文 * @param {VNode} vnode + * @param {any} table * @return {*} */ - checkToPassAppContext(vnode: VNode) { - if (this.currentContext) { - vnode.appContext = this.currentContext; - } + checkToPassAppContext(vnode: VNode, table: any) { + try { + const userAppContext = table.options?.customConfig?.getVueUserAppContext?.() ?? this.currentContext; + // 简单校验合法性 + if (!!userAppContext?.components && !!userAppContext?.directives) { + vnode.appContext = userAppContext; + } + } catch (error) {} } /** * @description: 获取渲染式编辑器的列配置主键