fix: fix editable cells cannot be entered

nebv
1 parent beb4c3a3
Showing 4 changed files with 10 additions and 16 deletions
src/components/Table/src/components/renderEditableCell.tsx
src/views/demo/echarts/Line.vue
src/views/demo/echarts/Map.vue
src/views/demo/echarts/Pie.vue
@@ -43,7 +43,7 @@ const EditableCell = defineComponent({
     const elRef = ref<any>(null);
  
     const isEditRef = ref(false);
-    const currentValueRef = ref<string | boolean>('');
+    const currentValueRef = ref<string | boolean>(props.value);
  
     function handleChange(e: ChangeEvent | string | boolean) {
       if ((e as ChangeEvent).target && Reflect.has((e as ChangeEvent).target, 'value')) {
@@ -106,7 +106,7 @@ const EditableCell = defineComponent({
                     }}
                     style={{ width: 'calc(100% - 48px)' }}
                     ref={elRef}
-                    value={value}
+                    value={unref(currentValueRef)}
                     size="small"
                     onChange={handleChange}
                     onPressEnter={handleSubmit}
@@ -141,12 +141,12 @@ export function renderEditableCell({
   return ({ text, record }: { text: string; record: any }) => {
     return (
       <EditableCell
+        {...componentOn}
+        {...componentProps}
         value={text}
         dataKey={record.key}
         dataIndex={dataIndex}
         component={component}
-        on={componentOn}
-        componentProps={componentProps}
       />
     );
   };
 <template>
-  <div class="p-4">
-    <div ref="chartRef" :style="{ height, width }" />
-  </div>
+  <div ref="chartRef" :style="{ height, width }" />
 </template>
 <script lang="ts">
   import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
@@ -18,7 +16,7 @@
       },
       height: {
         type: String as PropType<string>,
-        default: '80vh',
+        default: 'calc(100vh - 78px)',
       },
     },
     setup() {
 <template>
-  <div class="p-4">
-    <div ref="chartRef" :style="{ height, width }" />
-  </div>
+  <div ref="chartRef" :style="{ height, width }" />
 </template>
 <script lang="ts">
   import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
@@ -18,7 +16,7 @@
       },
       height: {
         type: String as PropType<string>,
-        default: '80vh',
+        default: 'calc(100vh - 78px)',
       },
     },
     setup() {
 <template>
-  <div class="p-4">
-    <div ref="chartRef" :style="{ height, width }" />
-  </div>
+  <div ref="chartRef" :style="{ height, width }" />
 </template>
 <script lang="ts">
   import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
@@ -16,7 +14,7 @@
       },
       height: {
         type: String as PropType<string>,
-        default: '80vh',
+        default: 'calc(100vh - 78px)',
       },
     },
     setup() {