From 69df6438cc62b5ca67ae1222a735b3bee509e7d5 Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Thu, 30 Jul 2026 13:17:58 +0800
Subject: [PATCH] fix(vue-vtable): avoid slot editor wrapper background

---
 packages/vue-vtable/demo/src/App.vue          |  3 +-
 .../Issue4884SlotEditorBackground.vue         | 54 +++++++++++++++++++
 packages/vue-vtable/src/edit/editor.ts        |  2 -
 3 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 packages/vue-vtable/demo/src/table/gramatical/composition/Issue4884SlotEditorBackground.vue

diff --git a/packages/vue-vtable/demo/src/App.vue b/packages/vue-vtable/demo/src/App.vue
index da28d5432f..3722650d69 100644
--- a/packages/vue-vtable/demo/src/App.vue
+++ b/packages/vue-vtable/demo/src/App.vue
@@ -21,6 +21,7 @@ import ListTableCustom from './table/gramatical/composition/ListTable-custom.vue
 import ListTableCustomHover from './table/gramatical/composition/ListTable-custom-hover.vue';
 import Issue5150CustomLayoutSort from './table/gramatical/composition/Issue5150CustomLayoutSort.vue';
 import Issue5157CustomLayoutScrollbar from './table/gramatical/composition/Issue5157CustomLayoutScrollbar.vue';
+import Issue4884SlotEditorBackground from './table/gramatical/composition/Issue4884SlotEditorBackground.vue';
 import ListTableVFor from './table/gramatical/options/ListTable-v-for.vue';
 
 import PivotTable from './table/gramatical/options/PivotTable.vue';
@@ -54,7 +55,7 @@ import singleRadio from './table/single/single-radio.vue';
 
   <!-- <ListTable /> -->
   <!-- <Issue5150CustomLayoutSort /> -->
-  <Issue5157CustomLayoutScrollbar />
+  <Issue4884SlotEditorBackground />
   <!-- <ListTableEditor /> -->
   <!-- <ListTableEditorArco /> -->
   <!-- <ListTableEditorRender /> -->
diff --git a/packages/vue-vtable/demo/src/table/gramatical/composition/Issue4884SlotEditorBackground.vue b/packages/vue-vtable/demo/src/table/gramatical/composition/Issue4884SlotEditorBackground.vue
new file mode 100644
index 0000000000..c7a95003a7
--- /dev/null
+++ b/packages/vue-vtable/demo/src/table/gramatical/composition/Issue4884SlotEditorBackground.vue
@@ -0,0 +1,54 @@
+<template>
+  <vue-list-table ref="tableRef" :options="option">
+    <ListColumn field="id" title="ID" :width="120" />
+    <ListColumn field="name" title="Name" :width="160" :editor="DYNAMIC_RENDER_EDITOR">
+      <template #edit="{ refValue }">
+        <div class="issue-4884-editor-root">
+          <input v-model="refValue.value" class="issue-4884-editor-input" />
+        </div>
+      </template>
+    </ListColumn>
+  </vue-list-table>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onMounted, ref } from 'vue';
+import { ListColumn, DYNAMIC_RENDER_EDITOR } from '../../../../../src';
+
+const tableRef = ref();
+
+const option = {
+  records: [
+    { id: 1, name: 'Alice' },
+    { id: 2, name: 'Bob' }
+  ],
+  editCellTrigger: 'click',
+  widthMode: 'standard'
+};
+
+onMounted(async () => {
+  await nextTick();
+  (window as any).issue4884GetEditorWrapperBackground = () => {
+    const editorRoot = document.querySelector('.issue-4884-editor-root') as HTMLElement | null;
+    const wrapper = editorRoot?.parentElement as HTMLElement | null;
+    return wrapper?.style.backgroundColor ?? null;
+  };
+  (window as any).issue4884StartEdit = () => tableRef.value?.vTableInstance?.startEditCell(1, 1);
+  (window as any).issue4884TableInstance = () => tableRef.value?.vTableInstance;
+});
+</script>
+
+<style scoped>
+.issue-4884-editor-root {
+  width: 100%;
+  height: 100%;
+}
+
+.issue-4884-editor-input {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border: 1px solid #1677ff;
+  background: transparent;
+}
+</style>
diff --git a/packages/vue-vtable/src/edit/editor.ts b/packages/vue-vtable/src/edit/editor.ts
index ce41464259..256ec9805e 100644
--- a/packages/vue-vtable/src/edit/editor.ts
+++ b/packages/vue-vtable/src/edit/editor.ts
@@ -182,8 +182,6 @@ export class DynamicRenderEditor {
     wrapContainer.style.position = 'absolute';
     wrapContainer.style.width = '100%';
     wrapContainer.style.boxSizing = 'border-box';
-    const { bgColor } = table.getCellStyle(col, row) || {};
-    wrapContainer.style.backgroundColor = bgColor || '#FFFFFF';
     this.wrapContainer = wrapContainer;
     this.tableContainer = container;
     this.tableContainer.appendChild(wrapContainer);