From 7f4ef21f37973202d8ded74926c3a23d37d2a34d Mon Sep 17 00:00:00 2001
From: hLinx <327159425@qq.com>
Date: Thu, 9 Jan 2025 10:03:09 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E5=B7=A5=E5=85=B7=E7=AE=B1?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=B5=84=E6=BA=90=E6=B1=A0=E5=8D=8F=E8=AE=AE?=
 =?UTF-8?q?=E5=8F=98=E6=9B=B4=5Ftable=20#8076=20#=20Reviewed,=20transactio?=
 =?UTF-8?q?n=20id:=2028902?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/editable-table/Column.vue  |  42 +++--
 .../src/components/editable-table/Index.vue   |   3 +-
 .../component/render-header/Index.vue         |   1 +
 .../component/render-header/render-th.ts      |  10 ++
 .../components/editable-table/edit/Block.vue  |  16 +-
 .../editable-table/edit/DatePicker.vue        |   7 +-
 .../editable-table/edit/TagInput.vue          |  14 +-
 .../editable-table/edit/Textarea.vue          |   6 +
 .../editable-table/edit/TimePicker.vue        |   7 +-
 .../editable-table/hooks/use-resize.ts        | 156 ++++++++++++++----
 .../src/components/editable-table/types.ts    |   2 +-
 dbm-ui/frontend/src/demo/Index.vue            |  44 +++--
 .../column/operation-column/Index.vue         |   4 +-
 13 files changed, 226 insertions(+), 86 deletions(-)

diff --git a/dbm-ui/frontend/src/components/editable-table/Column.vue b/dbm-ui/frontend/src/components/editable-table/Column.vue
index 4dba48360e..186caa101c 100644
--- a/dbm-ui/frontend/src/components/editable-table/Column.vue
+++ b/dbm-ui/frontend/src/components/editable-table/Column.vue
@@ -19,7 +19,10 @@
         content: disabledTips,
         disabled: !disabledTips,
       }"
-      class="bk-editable-table-field-cell">
+      class="bk-editable-table-field-cell"
+      :style="{
+        width: `${tableContext?.columnSizeConfig.value[columnKey]?.renderWidth}px`,
+      }">
       <slot />
 
       <div
@@ -82,6 +85,7 @@
     description?: string;
     loading?: boolean;
     appendRules?: IRule[];
+    resizeable?: boolean;
   }
 
   interface Slots {
@@ -98,8 +102,6 @@
     getRowIndex: () => number;
   }
 
-  const hasOwn = (obj: Record<string, any>, key: string) => Object.prototype.hasOwnProperty.call(obj, key);
-
   export interface IContext {
     instance: ComponentInternalInstance;
     el: HTMLElement;
@@ -119,7 +121,22 @@
   }> = Symbol('EditableTableColumnKey');
 </script>
 <script setup lang="ts">
-  const props = defineProps<Props>();
+  const props = withDefaults(defineProps<Props>(), {
+    field: undefined,
+    rowspan: undefined,
+    width: undefined,
+    minWidth: undefined,
+    maxWidth: undefined,
+    rules: undefined,
+    max: undefined,
+    min: undefined,
+    maxlength: undefined,
+    fixed: undefined,
+    disabledMethod: undefined,
+    description: undefined,
+    appendRules: undefined,
+    resizeable: true,
+  });
   const slots = defineSlots<Slots>();
 
   const tableContext = inject(tableInjectKey);
@@ -129,7 +146,7 @@
   const columnKey = `bk-editable-table-column-${rowContext?.getColumnIndex()}`;
 
   interface IFinalRule {
-    validator: (value: any) => Promise<boolean | string> | boolean | string;
+    validator: (value: any, rowData?: Record<string, any>) => Promise<boolean | string> | boolean | string;
     message: string | (() => string);
     trigger: string;
   }
@@ -324,7 +341,7 @@
     }
     let rules: IRule[] = [];
     // 继承 table 的验证规则
-    if (tableContext && tableContext.props.rules && hasOwn(tableContext.props.rules, props.field)) {
+    if (tableContext && tableContext.props.rules && _.has(tableContext.props.rules, props.field)) {
       rules = tableContext.props.rules[props.field];
     }
     // column 自己的 rules 规则优先级更高
@@ -343,7 +360,7 @@
 
     const doValidate = (() => {
       let stepIndex = -1;
-      return (finalRuleList: IFinalRule[], value: any): Promise<boolean> => {
+      return (finalRuleList: IFinalRule[], value: any, rowDataValue: Record<string, any>): Promise<boolean> => {
         stepIndex = stepIndex + 1;
         // 验证通过
         if (stepIndex >= finalRuleList.length) {
@@ -353,10 +370,10 @@
         const rule = finalRuleList[stepIndex];
 
         return Promise.resolve().then(() => {
-          const result = rule.validator(value);
+          const result = rule.validator(value, rowDataValue);
           // 同步验证通过下一步
           if (result === true) {
-            return doValidate(finalRuleList, value);
+            return doValidate(finalRuleList, value, rowDataValue);
           }
           // Promise异步处理验证结果
           return Promise.resolve(result)
@@ -370,7 +387,7 @@
               }
             })
             .then(
-              () => doValidate(finalRuleList, value),
+              () => doValidate(finalRuleList, value, rowDataValue),
               (errorMessage: string) => {
                 validateState.isError = true;
                 validateState.errorMessage = errorMessage;
@@ -422,9 +439,10 @@
         // 合并规则属性配置
         const finalRuleList = getTriggerRules(mergeRules(rules, getRulesFromProps(props)), trigger);
 
-        const value = _.get(tableContext.props.model[rowContext!.getRowIndex()], props.field || '_');
+        const rowDataValue = tableContext.props.model[rowContext!.getRowIndex()];
+        const value = _.get(rowDataValue, props.field || '_');
 
-        return resolve(doValidate(finalRuleList, value));
+        return resolve(doValidate(finalRuleList, value, rowDataValue));
       }, delay);
     });
   };
diff --git a/dbm-ui/frontend/src/components/editable-table/Index.vue b/dbm-ui/frontend/src/components/editable-table/Index.vue
index f443a99719..b0c30634c1 100644
--- a/dbm-ui/frontend/src/components/editable-table/Index.vue
+++ b/dbm-ui/frontend/src/components/editable-table/Index.vue
@@ -104,6 +104,7 @@
       emits: Emits;
       fixedRight: Ref<boolean>;
       fixedLeft: Ref<boolean>;
+      columnSizeConfig: Ref<Record<string, { renderWidth: number }>>;
       registerRow: (rowColumnList: IColumnContext[]) => void;
       updateRow: () => void;
       unregisterRow: (rowColumnList: IColumnContext[]) => void;
@@ -253,6 +254,7 @@
     emits,
     fixedLeft,
     fixedRight,
+    columnSizeConfig,
     registerRow,
     updateRow,
     unregisterRow,
@@ -301,7 +303,6 @@
     }
 
     table {
-      width: 100%;
       text-align: left;
       table-layout: fixed;
     }
diff --git a/dbm-ui/frontend/src/components/editable-table/component/render-header/Index.vue b/dbm-ui/frontend/src/components/editable-table/component/render-header/Index.vue
index 547190bf87..acde459fd8 100644
--- a/dbm-ui/frontend/src/components/editable-table/component/render-header/Index.vue
+++ b/dbm-ui/frontend/src/components/editable-table/component/render-header/Index.vue
@@ -9,6 +9,7 @@
           'fixed-right-column': columnItem.props.fixed === 'right',
         }"
         :column="columnItem"
+        :column-size-config="columnSizeConfig"
         :style="{
           width:
             columnSizeConfig[columnItem.key].renderWidth > 0 ? `${columnSizeConfig[columnItem.key].renderWidth}px` : '',
diff --git a/dbm-ui/frontend/src/components/editable-table/component/render-header/render-th.ts b/dbm-ui/frontend/src/components/editable-table/component/render-header/render-th.ts
index 73f8fdc10e..64551164a3 100644
--- a/dbm-ui/frontend/src/components/editable-table/component/render-header/render-th.ts
+++ b/dbm-ui/frontend/src/components/editable-table/component/render-header/render-th.ts
@@ -9,6 +9,10 @@ export default defineComponent({
       type: Object as () => IColumnContext,
       required: true,
     },
+    columnSizeConfig: {
+      type: Object as () => Record<string, { renderWidth: number }>,
+      required: true,
+    },
   },
   setup(props) {
     return () => {
@@ -72,6 +76,12 @@ export default defineComponent({
           'div',
           {
             class: 'bk-editable-table-label-cell',
+            style: {
+              width:
+                props.columnSizeConfig[props.column.key].renderWidth > 0
+                  ? `${props.columnSizeConfig[props.column.key].renderWidth - 20}px`
+                  : '',
+            },
           },
           childNode,
         ),
diff --git a/dbm-ui/frontend/src/components/editable-table/edit/Block.vue b/dbm-ui/frontend/src/components/editable-table/edit/Block.vue
index 132249b19b..458044daa3 100644
--- a/dbm-ui/frontend/src/components/editable-table/edit/Block.vue
+++ b/dbm-ui/frontend/src/components/editable-table/edit/Block.vue
@@ -33,7 +33,7 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { nextTick, onUpdated, ref, useTemplateRef, type VNode, watch } from 'vue';
+  import { nextTick, onMounted, onUpdated, ref, useTemplateRef, type VNode, watch } from 'vue';
 
   import useColumn from '../useColumn';
 
@@ -62,6 +62,12 @@
     columnContext?.validate('change');
   });
 
+  const calcPlaceholder = () => {
+    nextTick(() => {
+      isShowPlacehoder.value = !contentRef.value?.innerText;
+    });
+  };
+
   const handleBlur = () => {
     columnContext?.blur();
     columnContext?.validate('blur');
@@ -72,9 +78,11 @@
   };
 
   onUpdated(() => {
-    nextTick(() => {
-      isShowPlacehoder.value = !contentRef.value?.innerText;
-    });
+    calcPlaceholder();
+  });
+
+  onMounted(() => {
+    calcPlaceholder();
   });
 </script>
 <style lang="less">
diff --git a/dbm-ui/frontend/src/components/editable-table/edit/DatePicker.vue b/dbm-ui/frontend/src/components/editable-table/edit/DatePicker.vue
index affe1b1edf..62d71f17cc 100644
--- a/dbm-ui/frontend/src/components/editable-table/edit/DatePicker.vue
+++ b/dbm-ui/frontend/src/components/editable-table/edit/DatePicker.vue
@@ -5,6 +5,7 @@
     clearable
     v-bind="{ ...attrs, ...props }"
     @blur="handleBlur"
+    @change="handleChange"
     @focus="handleFocus" />
 </template>
 <script lang="ts">
@@ -16,7 +17,7 @@
     disabledDate?: (date: Date | number) => boolean;
   }
 </script>
-<script setup lang="ts" generic="T extends [string, string] | string | Date">
+<script setup lang="ts" generic="T extends [string, string] | [Date, Date] | string | Date">
   import { useAttrs, watch } from 'vue';
 
   import useColumn from '../useColumn';
@@ -48,6 +49,10 @@
     columnContext?.focus();
     emits('focus');
   };
+
+  const handleChange = (value: T) => {
+    emits('change', value);
+  };
 </script>
 <style lang="less">
   .bk-editable-date-picker {
diff --git a/dbm-ui/frontend/src/components/editable-table/edit/TagInput.vue b/dbm-ui/frontend/src/components/editable-table/edit/TagInput.vue
index aa9505d064..d9ba7f146f 100644
--- a/dbm-ui/frontend/src/components/editable-table/edit/TagInput.vue
+++ b/dbm-ui/frontend/src/components/editable-table/edit/TagInput.vue
@@ -1,6 +1,7 @@
 <template>
+  <!-- prettier-ignore -->
   <BkTagInput
-    v-model="modelValue"
+    v-model="(modelValue as string[])"
     allow-create
     class="bk-editable-tag-input"
     v-bind="{ ...attrs, ...props }"
@@ -9,30 +10,31 @@
     @blur="handleBlur"
     @focus="handleFocus" />
 </template>
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends string[] | number[] | string | number">
   import { watch } from 'vue';
 
   import useColumn from '../useColumn';
 
   /* eslint-disable vue/no-unused-properties */
-  interface Props {
+  export interface Props {
     placeholder?: string;
     maxData?: number;
   }
 
-  interface Emits {
+  export interface Emits<T> {
     (e: 'blur'): void;
     (e: 'focus'): void;
+    (e: 'change', value: T): void;
   }
 
   const props = defineProps<Props>();
-  const emits = defineEmits<Emits>();
+  const emits = defineEmits<Emits<T>>();
 
   const attrs = useAttrs();
 
   const columnContext = useColumn();
 
-  const modelValue = defineModel<string[]>();
+  const modelValue = defineModel<T>();
 
   watch(modelValue, () => {
     columnContext?.validate('change');
diff --git a/dbm-ui/frontend/src/components/editable-table/edit/Textarea.vue b/dbm-ui/frontend/src/components/editable-table/edit/Textarea.vue
index 46b457ad9f..c9f50935b7 100644
--- a/dbm-ui/frontend/src/components/editable-table/edit/Textarea.vue
+++ b/dbm-ui/frontend/src/components/editable-table/edit/Textarea.vue
@@ -13,6 +13,7 @@
       v-bind="{ ...attrs, ...props }"
       type="textarea"
       @blur="handleBlur"
+      @change="handleChange"
       @focus="handleFocus" />
     <div
       v-if="slots.append"
@@ -37,6 +38,7 @@
   interface Emits {
     (e: 'blur'): void;
     (e: 'focus'): void;
+    (e: 'change', value: string): void;
   }
 
   const props = defineProps<Props>();
@@ -68,6 +70,10 @@
     columnContext?.focus();
     emits('focus');
   };
+
+  const handleChange = (value: string) => {
+    emits('change', value);
+  };
 </script>
 <style lang="less">
   .bk-editable-textarea {
diff --git a/dbm-ui/frontend/src/components/editable-table/edit/TimePicker.vue b/dbm-ui/frontend/src/components/editable-table/edit/TimePicker.vue
index 9195223cf6..5ebb6bdb0c 100644
--- a/dbm-ui/frontend/src/components/editable-table/edit/TimePicker.vue
+++ b/dbm-ui/frontend/src/components/editable-table/edit/TimePicker.vue
@@ -4,6 +4,7 @@
     class="bk-editable-time-picker"
     v-bind="{ ...attrs, ...props }"
     @blur="handleBlur"
+    @change="handleChange"
     @focus="handleFocus" />
 </template>
 <script lang="ts">
@@ -16,7 +17,7 @@
     disabledDate?: (date: Date | number) => boolean;
   }
 </script>
-<script setup lang="ts" generic="T extends [string, string] | string | Date">
+<script setup lang="ts" generic="T extends [string, string] | [Date, Date] | string | Date">
   import { useAttrs, watch } from 'vue';
 
   import useColumn from '../useColumn';
@@ -48,6 +49,10 @@
     columnContext?.focus();
     emits('focus');
   };
+
+  const handleChange = (value: T) => {
+    emits('change', value);
+  };
 </script>
 <style lang="less">
   .bk-editable-time-picker {
diff --git a/dbm-ui/frontend/src/components/editable-table/hooks/use-resize.ts b/dbm-ui/frontend/src/components/editable-table/hooks/use-resize.ts
index aaa96ad2a9..3ad0be3e5f 100644
--- a/dbm-ui/frontend/src/components/editable-table/hooks/use-resize.ts
+++ b/dbm-ui/frontend/src/components/editable-table/hooks/use-resize.ts
@@ -14,9 +14,9 @@ export default function (
     Record<
       string,
       {
-        width: number;
-        minWidth: number;
-        maxWidth: number;
+        width?: number;
+        minWidth?: number;
+        maxWidth?: number;
         renderWidth: number;
       }
     >
@@ -33,29 +33,103 @@ export default function (
   watch(
     columnList,
     () => {
+      if (!tableRef.value) {
+        return;
+      }
+      const tableWidth = tableRef.value.getBoundingClientRect().width;
+
       const columnSizeConfigCache = { ...columnSizeConfig.value };
-      columnSizeConfig.value = columnList.value.reduce((result, columnConfig) => {
-        const width = columnConfig.props.width || 0;
-        const minWidth =
-          Number(columnConfig.props.minWidth) > 60 ? Number(columnConfig.props.minWidth) : Number.MIN_VALUE;
-        const maxWidth =
-          Number(columnConfig.props.maxWidth) > 60 ? Number(columnConfig.props.maxWidth) : Number.MAX_VALUE;
-
-        const renderWidth = Math.min(Math.max(width, minWidth), maxWidth);
-
-        Object.assign(result, {
-          [columnConfig.key]: columnSizeConfigCache[columnConfig.key]
-            ? columnSizeConfigCache[columnConfig.key]
-            : {
-                width,
-                minWidth,
-                maxWidth,
-                renderWidth,
-              },
+
+      const maxColumn: IColumnContext[] = [];
+      const minColumn: IColumnContext[] = [];
+      const pxColumn: IColumnContext[] = [];
+      const autoColumn: IColumnContext[] = [];
+
+      columnList.value.forEach((column) => {
+        if (column.props.width) {
+          pxColumn.push(column);
+        } else if (column.props.minWidth) {
+          minColumn.push(column);
+        } else if (column.props.maxWidth) {
+          maxColumn.push(column);
+        } else {
+          autoColumn.push(column);
+        }
+      });
+
+      let totalWidth = 0;
+      pxColumn.forEach((column) => {
+        if (columnSizeConfigCache[column.key]) {
+          return;
+        }
+        columnSizeConfigCache[column.key] = {
+          width: column.props.width,
+          renderWidth: Number(column.props.width),
+        };
+        totalWidth += Number(column.props.width);
+      });
+      minColumn.forEach((column) => {
+        if (columnSizeConfigCache[column.key]) {
+          return;
+        }
+        columnSizeConfigCache[column.key] = {
+          minWidth: column.props.minWidth,
+          renderWidth: Number(column.props.minWidth),
+        };
+        totalWidth += Number(column.props.minWidth);
+      });
+
+      const remainWidth = tableWidth - totalWidth;
+
+      let meanWidth =
+        remainWidth > 0 ? Math.floor(remainWidth / (minColumn.length + maxColumn.length + autoColumn.length)) : 0;
+
+      let extraWidth = 0;
+      maxColumn.forEach((column) => {
+        if (columnSizeConfigCache[column.key]) {
+          return;
+        }
+        let renderWidth = meanWidth;
+        if (Number(column.props.maxWidth) <= meanWidth) {
+          renderWidth = Number(column.props.maxWidth);
+          extraWidth += meanWidth - Number(column.props.maxWidth);
+        }
+        columnSizeConfigCache[column.key] = {
+          maxWidth: column.props.maxWidth,
+          renderWidth,
+        };
+      });
+      meanWidth += Math.floor(extraWidth / (autoColumn.length + minColumn.length));
+      minColumn.forEach((column) => {
+        Object.assign(columnSizeConfigCache[column.key], {
+          renderWidth: columnSizeConfigCache[column.key].renderWidth + meanWidth,
         });
+      });
+      autoColumn.forEach((column) => {
+        columnSizeConfigCache[column.key] = {
+          renderWidth: meanWidth,
+        };
+      });
 
-        return result;
-      }, {});
+      const renderColumnWidthTotal = Object.values(columnSizeConfigCache).reduce(
+        (result, item) => result + item.renderWidth,
+        0,
+      );
+      if (renderColumnWidthTotal < tableWidth) {
+        const fixWidth = tableWidth - renderColumnWidthTotal;
+        if (minColumn.length > 0) {
+          columnSizeConfigCache[minColumn[0].key].renderWidth =
+            columnSizeConfigCache[minColumn[0].key].renderWidth + fixWidth;
+        } else if (autoColumn.length > 0) {
+          columnSizeConfigCache[autoColumn[0].key].renderWidth =
+            columnSizeConfigCache[autoColumn[0].key].renderWidth + fixWidth;
+        } else if (maxColumn.length > 0) {
+          columnSizeConfigCache[maxColumn[0].key].renderWidth =
+            columnSizeConfigCache[maxColumn[0].key].renderWidth + fixWidth;
+        }
+      }
+
+      columnSizeConfig.value = columnSizeConfigCache;
     },
     {
       immediate: true,
@@ -103,33 +177,38 @@ export default function (
 
     const handleMouseUp = () => {
       if (dragging.value) {
-        const containerWidth = tableEl!.getBoundingClientRect().width;
-        const containerScrollWidth = tableEl!.scrollWidth;
-        const isScrolling = containerScrollWidth > containerWidth;
         const { startColumnLeft } = dragState.value;
         const finalLeft = Number.parseInt(resizeProxy.style.left, 10);
-        const latestColumnWidth = Math.ceil(Math.max(finalLeft - startColumnLeft, 60));
+        const latestColumnWidth = Math.ceil(Math.max(finalLeft - startColumnLeft, 80));
 
         const nextSiblingEl = columnEl!.nextElementSibling as HTMLElement;
 
         if (nextSiblingEl!.classList.contains('table-column-resize')) {
           return;
         }
-        // 没有出现滚动条时缩小当前列的宽度同时会放大后面一列的宽度
-        if (!isScrolling && columnRect.width > latestColumnWidth) {
-          const latestWidth = columnRect.width - latestColumnWidth + nextSiblingEl!.getBoundingClientRect().width;
-          console.log('latestWidth = ', latestWidth);
-        }
 
         resizeProxy.style.display = 'none';
         document.body.style.cursor = '';
         dragging.value = false;
 
         const realWidth = Math.max(
-          columnSizeConfig.value[columnKey].minWidth as number,
-          Math.min(latestColumnWidth, columnSizeConfig.value[columnKey].maxWidth as number),
+          columnSizeConfig.value[columnKey].minWidth || 60,
+          Math.min(latestColumnWidth, columnSizeConfig.value[columnKey].maxWidth || 1000000),
         );
-        columnSizeConfig.value[columnKey].renderWidth = realWidth;
+        const renderColumWidthTotal = Array.from(columnEl.parentElement!.children).reduce((result, element) => {
+          if (element === columnEl) {
+            return result;
+          }
+          return result + element.getBoundingClientRect().width;
+        }, 0);
+
+        const tableWidth = tableRef.value!.getBoundingClientRect().width;
+
+        if (renderColumWidthTotal + realWidth < tableWidth) {
+          columnSizeConfig.value[columnKey].renderWidth = tableWidth - renderColumWidthTotal;
+        } else {
+          columnSizeConfig.value[columnKey].renderWidth = realWidth;
+        }
       }
 
       dragable = false;
@@ -151,6 +230,13 @@ export default function (
       return;
     }
 
+    const columnKey = target.dataset.name as string;
+
+    const targetColumn = _.find(columnList.value, (column) => column.key === columnKey);
+    if (!targetColumn || !targetColumn.props.resizeable) {
+      return;
+    }
+
     const rect = target!.getBoundingClientRect();
 
     const bodyStyle = document.body.style;
diff --git a/dbm-ui/frontend/src/components/editable-table/types.ts b/dbm-ui/frontend/src/components/editable-table/types.ts
index 627b8f6f9d..12a8f49866 100644
--- a/dbm-ui/frontend/src/components/editable-table/types.ts
+++ b/dbm-ui/frontend/src/components/editable-table/types.ts
@@ -5,7 +5,7 @@ export interface IRule {
   max?: number;
   maxlength?: number;
   pattern?: RegExp;
-  validator?: (value: any) => Promise<boolean | string> | boolean | string;
+  validator?: (value: any, rowData?: Record<string, any>) => Promise<boolean | string> | boolean | string;
   message: (() => string) | string;
   trigger: string;
 }
diff --git a/dbm-ui/frontend/src/demo/Index.vue b/dbm-ui/frontend/src/demo/Index.vue
index c8420b8285..c735c30be8 100644
--- a/dbm-ui/frontend/src/demo/Index.vue
+++ b/dbm-ui/frontend/src/demo/Index.vue
@@ -11,7 +11,7 @@
         fixed="left"
         label="第一列"
         :loading="isLoading"
-        :min-width="300">
+        :width="200">
         <EditInput
           v-model="item.name"
           clearable
@@ -26,7 +26,7 @@
       <EditableTableColumn
         field="age"
         label="第二列"
-        :min-width="300">
+        :width="200">
         <EditSelect v-model="item.age">
           <BkOption
             id="1"
@@ -38,16 +38,14 @@
       </EditableTableColumn>
       <EditableTableColumn
         field="date"
-        label="第三列"
-        :min-width="300">
+        label="第三列">
         <EditDatePicker
           v-model="item.date"
           @change="handleChange" />
       </EditableTableColumn>
       <EditableTableColumn
         field="time"
-        label="第四列"
-        :min-width="300">
+        label="第四列">
         <EditTimePicker
           v-model="item.time"
           @change="handleChange" />
@@ -55,13 +53,13 @@
       <EditableTableColumn
         field="tag"
         label="第五列"
-        :min-width="300">
+        :min-width="200">
         <EditTagInput v-model="item.tag" />
       </EditableTableColumn>
       <EditableTableColumn
         field="tag"
         label="第五列"
-        :min-width="300">
+        :min-width="200">
         <EditBlock v-model="item.des">
           {{ item.more }}
           <template #append> as </template>
@@ -70,7 +68,7 @@
       <EditableTableColumn
         field="more"
         label="第六列"
-        :min-width="300">
+        :min-width="200">
         <EditTextarea v-model="item.more" />
       </EditableTableColumn>
       <OperationColumn
@@ -117,25 +115,25 @@
 
   const dataModel = reactive([
     createData(),
-    // createData(),
-    // createData(),
-    // createData(),
-    // createData(),
-    // createData(),
-    // createData(),
-    // createData(),
-    // createData(),
-    // createData(),
-    // createData(),
-    // createData(),
-    // createData(),
+    createData(),
+    createData(),
+    createData(),
+    createData(),
+    createData(),
+    createData(),
+    createData(),
+    createData(),
+    createData(),
+    createData(),
+    createData(),
+    createData(),
   ]);
 
   const rules = {
     name: [
       {
-        validator: (value: string) => {
-          console.log('change validator = ', value);
+        validator: (value: string, rowData: any) => {
+          console.log('change validator = ', value, rowData);
           return Boolean(value);
         },
         message: '错了',
diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/operation-column/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/operation-column/Index.vue
index 4cf88ee9f9..badf104e83 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/operation-column/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/operation-column/Index.vue
@@ -16,8 +16,8 @@
     ref="column"
     fixed="right"
     :label="t('操作')"
-    :max-width="100"
-    :min-width="100">
+    :resizeable="false"
+    :width="100">
     <div class="toolbox-operation-column">
       <div
         v-if="Boolean(createRowMethod)"