diff --git a/dbm-ui/frontend/src/components/editable-table/Column.vue b/dbm-ui/frontend/src/components/editable-table/Column.vue
index 00d698edfd..e85fd9fbb2 100644
--- a/dbm-ui/frontend/src/components/editable-table/Column.vue
+++ b/dbm-ui/frontend/src/components/editable-table/Column.vue
@@ -96,27 +96,20 @@
 
   const hasOwn = (obj: Record<string, any>, key: string) => Object.prototype.hasOwnProperty.call(obj, key);
 
-  const getRuleMessage = (rule: IRule) => {
-    if (typeof rule.message === 'function') {
-      return rule.message();
-    }
-    return rule.message;
-  };
-
   export interface IContext {
     instance: ComponentInternalInstance;
     el: HTMLElement;
     key: string;
     props: Props;
     slots: Slots;
-    validate: () => Promise<boolean>;
+    validate: (trigger?: string) => Promise<boolean>;
   }
 
   export const EditableTableColumnKey: InjectionKey<{
     blur: () => void;
     focus: () => void;
     registerRules: (params: IRule[]) => void;
-    validate: () => Promise<boolean>;
+    validate: (trigger?: string) => Promise<boolean>;
     clearValidate: () => void;
   }> = Symbol('EditableTableColumnKey');
 </script>
@@ -258,6 +251,25 @@
     return [...filterPropRules, ...formatConfigRules];
   };
 
+  const getTriggerRules = (rules: IFinalRule[], trigger?: string) =>
+    rules.reduce((result, rule) => {
+      if (!rule.trigger || !trigger) {
+        result.push(rule);
+        return result;
+      }
+      if (rule.trigger === trigger) {
+        result.push(rule);
+      }
+      return result;
+    }, [] as IFinalRule[]);
+
+  const getRuleMessage = (rule: IFinalRule) => {
+    if (typeof rule.message === 'function') {
+      return rule.message();
+    }
+    return rule.message;
+  };
+
   let registerRules: IRule[] = [];
 
   const rootRef = ref<HTMLElement>();
@@ -283,25 +295,33 @@
     return result ? '无法操作' : '';
   });
 
-  const validate = (): Promise<boolean> => {
+  const validate = (trigger?: string): Promise<boolean> => {
+    // 重新触发验证重置上次的验证状态
+    validateState.isError = false;
+    validateState.errorMessage = '';
+
     if (!tableContext) {
       return Promise.resolve(false);
     }
+    // 单元格被合并跳过验证
+    if (!isRowspanRender.value) {
+      return Promise.resolve(true);
+    }
     // 没有设置 field 不进行验证
     if (!props.field) {
       return Promise.resolve(true);
     }
     let rules: IRule[] = [];
-    // 继承 form 的验证规则
+    // 继承 table 的验证规则
     if (tableContext && tableContext.props.rules && hasOwn(tableContext.props.rules, props.field)) {
       rules = tableContext.props.rules[props.field];
     }
-    // form-item 自己的 rules 规则优先级更高
+    // column 自己的 rules 规则优先级更高
     if (props.rules) {
       rules = props.rules as IRule[];
     } else if (props.appendRules) {
       // 配置了 props.rules 时 props.appendRules 不生效
-      // props.appendRules 与 form 的验证规则合并且优先级高
+      // props.appendRules 与 table 的验证规则合并且优先级高
       rules = [...rules, ...props.appendRules];
     }
 
@@ -311,15 +331,13 @@
     }
 
     // 合并规则属性配置
-    const finalRuleList = mergeRules(rules, getRulesFromProps(props));
+    const finalRuleList = getTriggerRules(mergeRules(rules, getRulesFromProps(props)), trigger);
 
-    // 重新触发验证重置上次的验证状态
-    if (rules.length > 0) {
-      validateState.isError = false;
-      validateState.errorMessage = '';
+    if (finalRuleList.length < 1) {
+      return Promise.resolve(true);
     }
 
-    const value = get(tableContext.props.model, props.field);
+    const value = get(tableContext.props.model[rowContext!.getRowIndex()], props.field);
 
     const doValidate = (() => {
       let stepIndex = -1;
@@ -334,39 +352,30 @@
 
         return Promise.resolve().then(() => {
           const result = rule.validator(value);
-          // 异步验证（validator 返回一个 Promise）
-          if (typeof result !== 'boolean' && typeof result !== 'string' && typeof result.then === 'function') {
-            return result
-              .then((data) => {
-                // 异步验证结果为 false
-                if (data === false) {
-                  return Promise.reject(getRuleMessage(rule));
-                }
-                if (typeof data === 'string') {
-                  return Promise.reject(data);
-                }
-              })
-              .then(
-                () => doValidate(),
-                (errorMessage: string) => {
-                  validateState.isError = true;
-                  validateState.errorMessage = errorMessage;
-                  tableContext.emits('validate', props.field || '', false, errorMessage);
-                  return Promise.reject(validateState.errorMessage);
-                },
-              );
+          // 同步验证通过下一步
+          if (result === true) {
+            return doValidate();
           }
-          // 同步验证失败
-          if (result === false) {
-            const errorMessage = getRuleMessage(rule);
-            validateState.isError = true;
-            // 验证结果返回的是 String 表示验证失败，返回结果作为错误信息
-            validateState.errorMessage = typeof result === 'string' ? result : errorMessage;
-            tableContext.emits('validate', props.field || '', false, errorMessage);
-            return Promise.reject(validateState.errorMessage);
-          }
-          // 下一步
-          return doValidate();
+          // Promise异步处理验证结果
+          return Promise.resolve(result)
+            .then((data) => {
+              // 异步验证结果为 false
+              if (data === false) {
+                return Promise.reject(getRuleMessage(rule));
+              }
+              if (typeof data === 'string') {
+                return Promise.reject(data);
+              }
+            })
+            .then(
+              () => doValidate(),
+              (errorMessage: string) => {
+                validateState.isError = true;
+                validateState.errorMessage = errorMessage;
+                tableContext.emits('validate', props.field || '', false, errorMessage);
+                return Promise.reject(validateState.errorMessage);
+              },
+            );
         });
       };
     })();
diff --git a/dbm-ui/frontend/src/components/editable-table/Row.vue b/dbm-ui/frontend/src/components/editable-table/Row.vue
index 6f22c1d74c..5ff1f1c72b 100644
--- a/dbm-ui/frontend/src/components/editable-table/Row.vue
+++ b/dbm-ui/frontend/src/components/editable-table/Row.vue
@@ -14,6 +14,7 @@
     registerColumn: (column: IColumnContext) => void;
     unregisterColumn: (columnKey: string) => void;
     getColumnIndex: () => number;
+    getRowIndex: () => number;
   }> = Symbol.for('bk-editable-table-row');
 </script>
 <script setup lang="ts">
@@ -47,10 +48,13 @@
     };
   })();
 
+  const getRowIndex = () => tableContext?.getAllColumnList().findIndex((item) => item === columnList) as number;
+
   provide(injectKey, {
     registerColumn,
     unregisterColumn,
     getColumnIndex,
+    getRowIndex,
   });
 
   onMounted(() => {
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 31b85e4bfc..f8ddaab51c 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 { onBeforeUpdate, ref, useTemplateRef, type VNode, watch } from 'vue';
+  import { nextTick, onUpdated, ref, useTemplateRef, type VNode, watch } from 'vue';
 
   import useColumn from '../useColumn';
 
@@ -60,19 +60,22 @@
   const isShowPlacehoder = ref(false);
 
   watch(modelValue, () => {
-    columnContext?.validate();
+    columnContext?.validate('change');
   });
 
   const handleBlur = () => {
     columnContext?.blur();
+    columnContext?.validate('blur');
   };
 
   const handleFocus = () => {
     columnContext?.focus();
   };
 
-  onBeforeUpdate(() => {
-    isShowPlacehoder.value = !contentRef.value?.innerText;
+  onUpdated(() => {
+    nextTick(() => {
+      isShowPlacehoder.value = !contentRef.value?.innerText;
+    });
   });
 </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 a7fc6f07ed..affe1b1edf 100644
--- a/dbm-ui/frontend/src/components/editable-table/edit/DatePicker.vue
+++ b/dbm-ui/frontend/src/components/editable-table/edit/DatePicker.vue
@@ -2,20 +2,51 @@
   <BkDatePicker
     append-to-body
     class="bk-editable-date-picker"
+    clearable
+    v-bind="{ ...attrs, ...props }"
     @blur="handleBlur"
     @focus="handleFocus" />
 </template>
-<script setup lang="ts">
+<script lang="ts">
+  /* eslint-disable vue/no-unused-properties */
+  interface Props {
+    placeholder?: string;
+    format?: string;
+    multiple?: boolean;
+    disabledDate?: (date: Date | number) => boolean;
+  }
+</script>
+<script setup lang="ts" generic="T extends [string, string] | string | Date">
+  import { useAttrs, watch } from 'vue';
+
   import useColumn from '../useColumn';
 
+  const props = defineProps<Props>();
+  const emits = defineEmits<{
+    (e: 'blur'): void;
+    (e: 'focus'): void;
+    (e: 'change', value: T): void;
+  }>();
+
+  const attrs = useAttrs();
+
   const columnContext = useColumn();
 
+  const modelValue = defineModel<T>();
+
+  watch(modelValue, () => {
+    columnContext?.validate('change');
+  });
+
   const handleBlur = () => {
     columnContext?.blur();
+    columnContext?.validate('blur');
+    emits('blur');
   };
 
   const handleFocus = () => {
     columnContext?.focus();
+    emits('focus');
   };
 </script>
 <style lang="less">
diff --git a/dbm-ui/frontend/src/components/editable-table/edit/Input.vue b/dbm-ui/frontend/src/components/editable-table/edit/Input.vue
index a530bb0a3e..a54a6b1474 100644
--- a/dbm-ui/frontend/src/components/editable-table/edit/Input.vue
+++ b/dbm-ui/frontend/src/components/editable-table/edit/Input.vue
@@ -2,28 +2,54 @@
   <BkInput
     v-model="modelValue"
     class="bk-editable-input"
+    v-bind="{ ...attrs, ...props }"
+    clearable
     @blur="handleBlur"
     @focus="handleFocus" />
 </template>
 <script setup lang="ts">
-  import { watch } from 'vue';
+  import { useAttrs, watch } from 'vue';
 
   import useColumn from '../useColumn';
 
+  /* eslint-disable vue/no-unused-properties */
+  interface Props {
+    placeholder?: string;
+    prefix?: string;
+    suffix?: string;
+    maxlength?: number;
+    minlength?: number;
+  }
+
+  interface Emits {
+    (e: 'blur'): void;
+    (e: 'focus'): void;
+  }
+
+  const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
+
+  const attrs = useAttrs();
+
   const columnContext = useColumn();
 
   const modelValue = defineModel<string>();
 
   watch(modelValue, () => {
-    columnContext?.validate();
+    columnContext?.validate('change');
+    console.log('change');
   });
 
   const handleBlur = () => {
     columnContext?.blur();
+    columnContext?.validate('blur');
+    emits('blur');
+    console.log('handleBlur');
   };
 
   const handleFocus = () => {
     columnContext?.focus();
+    emits('focus');
   };
 </script>
 <style lang="less">
diff --git a/dbm-ui/frontend/src/components/editable-table/edit/Select.vue b/dbm-ui/frontend/src/components/editable-table/edit/Select.vue
index d6ee9b6a5e..33725997db 100644
--- a/dbm-ui/frontend/src/components/editable-table/edit/Select.vue
+++ b/dbm-ui/frontend/src/components/editable-table/edit/Select.vue
@@ -1,22 +1,55 @@
 <template>
   <BkSelect
+    v-model="modelValue"
     class="bk-editable-select"
+    v-bind="{ ...attrs, ...props }"
     @blur="handleBlur"
     @focus="handleFocus">
     <slot />
   </BkSelect>
 </template>
-<script setup lang="ts">
+<script lang="ts">
+  /* eslint-disable vue/no-unused-properties */
+  interface Props {
+    placeholder?: string;
+    disabled?: boolean;
+    multiple?: boolean;
+    filterable?: boolean;
+    popoverOptions?: Record<string, any>;
+    clearable?: boolean;
+  }
+</script>
+<script setup lang="ts" generic="T extends string[] | number[] | string | number">
+  import { useAttrs, watch } from 'vue';
+
   import useColumn from '../useColumn';
 
+  const props = defineProps<Props>();
+  const emits = defineEmits<{
+    (e: 'blur'): void;
+    (e: 'focus'): void;
+    (e: 'change', value: T): void;
+  }>();
+
+  const attrs = useAttrs();
+
   const columnContext = useColumn();
 
+  const modelValue = defineModel<T>();
+
+  watch(modelValue, () => {
+    columnContext?.validate('change');
+  });
+
   const handleBlur = () => {
     columnContext?.blur();
+    columnContext?.validate('blur');
+    emits('blur');
   };
 
   const handleFocus = () => {
     columnContext?.focus();
+    emits('focus');
   };
 </script>
 <style lang="less">
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 3f1d6ee34c..aa9505d064 100644
--- a/dbm-ui/frontend/src/components/editable-table/edit/TagInput.vue
+++ b/dbm-ui/frontend/src/components/editable-table/edit/TagInput.vue
@@ -3,6 +3,7 @@
     v-model="modelValue"
     allow-create
     class="bk-editable-tag-input"
+    v-bind="{ ...attrs, ...props }"
     clearable
     has-delete-icon
     @blur="handleBlur"
@@ -13,20 +14,39 @@
 
   import useColumn from '../useColumn';
 
+  /* eslint-disable vue/no-unused-properties */
+  interface Props {
+    placeholder?: string;
+    maxData?: number;
+  }
+
+  interface Emits {
+    (e: 'blur'): void;
+    (e: 'focus'): void;
+  }
+
+  const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
+
+  const attrs = useAttrs();
+
   const columnContext = useColumn();
 
   const modelValue = defineModel<string[]>();
 
   watch(modelValue, () => {
-    columnContext?.validate();
+    columnContext?.validate('change');
   });
 
   const handleBlur = () => {
     columnContext?.blur();
+    columnContext?.validate('blur');
+    emits('blur');
   };
 
   const handleFocus = () => {
     columnContext?.focus();
+    emits('focus');
   };
 </script>
 <style lang="less">
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 d8aaf10a66..52a94fc1f5 100644
--- a/dbm-ui/frontend/src/components/editable-table/edit/Textarea.vue
+++ b/dbm-ui/frontend/src/components/editable-table/edit/Textarea.vue
@@ -5,34 +5,56 @@
     class="bk-editable-input"
     :resize="false"
     type="textarea"
+    v-bind="{ ...attrs, ...props }"
     @blur="handleBlur"
     @focus="handleFocus" />
 </template>
 <script setup lang="ts">
-  import { watch } from 'vue';
+  import { useAttrs, watch } from 'vue';
 
   import useColumn from '../useColumn';
 
+  /* eslint-disable vue/no-unused-properties */
+  interface Props {
+    placeholder?: string;
+    maxlength?: number;
+    minlength?: number;
+  }
+
+  interface Emits {
+    (e: 'blur'): void;
+    (e: 'focus'): void;
+  }
+
+  const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
+
+  const attrs = useAttrs();
+
   const columnContext = useColumn();
 
   const modelValue = defineModel<string>();
 
   watch(modelValue, () => {
-    columnContext?.validate();
+    columnContext?.validate('change');
   });
 
   const handleBlur = () => {
     columnContext?.blur();
+    columnContext?.validate('blur');
+    emits('blur');
   };
 
   const handleFocus = () => {
     columnContext?.focus();
+    emits('focus');
   };
 </script>
 <style lang="less">
   .bk-editable-input {
     &.bk-textarea {
       min-height: 40px;
+      padding-top: 6px;
       background: transparent;
       border: none;
       border-radius: none;
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 472b801390..9195223cf6 100644
--- a/dbm-ui/frontend/src/components/editable-table/edit/TimePicker.vue
+++ b/dbm-ui/frontend/src/components/editable-table/edit/TimePicker.vue
@@ -2,20 +2,51 @@
   <BkTimePicker
     append-to-body
     class="bk-editable-time-picker"
+    v-bind="{ ...attrs, ...props }"
     @blur="handleBlur"
     @focus="handleFocus" />
 </template>
-<script setup lang="ts">
+<script lang="ts">
+  /* eslint-disable vue/no-unused-properties */
+  interface Props {
+    placeholder?: string;
+    type?: 'time' | 'timerange';
+    format?: string;
+    multiple?: boolean;
+    disabledDate?: (date: Date | number) => boolean;
+  }
+</script>
+<script setup lang="ts" generic="T extends [string, string] | string | Date">
+  import { useAttrs, watch } from 'vue';
+
   import useColumn from '../useColumn';
 
+  const props = defineProps<Props>();
+  const emits = defineEmits<{
+    (e: 'blur'): void;
+    (e: 'focus'): void;
+    (e: 'change', value: T): void;
+  }>();
+
+  const attrs = useAttrs();
+
   const columnContext = useColumn();
 
+  const modelValue = defineModel<T>();
+
+  watch(modelValue, () => {
+    columnContext?.validate('change');
+  });
+
   const handleBlur = () => {
     columnContext?.blur();
+    columnContext?.validate('blur');
+    emits('blur');
   };
 
   const handleFocus = () => {
     columnContext?.focus();
+    emits('focus');
   };
 </script>
 <style lang="less">
diff --git a/dbm-ui/frontend/src/components/editable-table/types.ts b/dbm-ui/frontend/src/components/editable-table/types.ts
index 627b8f6f9d..34b65a81f3 100644
--- a/dbm-ui/frontend/src/components/editable-table/types.ts
+++ b/dbm-ui/frontend/src/components/editable-table/types.ts
@@ -7,5 +7,5 @@ export interface IRule {
   pattern?: RegExp;
   validator?: (value: any) => Promise<boolean | string> | boolean | string;
   message: (() => string) | string;
-  trigger: string;
+  trigger: 'change' | 'blur';
 }
diff --git a/dbm-ui/frontend/src/demo/Index.vue b/dbm-ui/frontend/src/demo/Index.vue
index c2db08ecf6..1d6efb0628 100644
--- a/dbm-ui/frontend/src/demo/Index.vue
+++ b/dbm-ui/frontend/src/demo/Index.vue
@@ -10,15 +10,18 @@
         field="name"
         fixed="left"
         label="第一列"
-        :loading="isLoading"
         :min-width="300"
         :rowspan="5">
-        <EditInput v-model="item.name" />
+        <EditInput
+          v-model="item.name"
+          clearable
+          @clear="handleClear" />
       </EditableTableColumn>
       <EditableTableColumn
         field="age"
         label="第二列"
-        :min-width="300">
+        :min-width="300"
+        required>
         <EditSelect v-model="item.age">
           <BkOption
             id="1"
@@ -31,14 +34,19 @@
       <EditableTableColumn
         field="date"
         label="第三列"
-        :min-width="300">
-        <EditDatePicker v-model="item.date" />
+        :min-width="300"
+        required>
+        <EditDatePicker
+          v-model="item.date"
+          @change="handleChange" />
       </EditableTableColumn>
       <EditableTableColumn
         field="time"
         label="第四列"
         :min-width="300">
-        <EditTimePicker v-model="item.time" />
+        <EditTimePicker
+          v-model="item.time"
+          @change="handleChange" />
       </EditableTableColumn>
       <EditableTableColumn
         field="tag"
@@ -51,15 +59,7 @@
         label="第五列"
         :min-width="300">
         <EditBlock v-model="item.des">
-          <div>
-            <div>这是一段文字</div>
-            <div>这是一段文字</div>
-            <div>这是一段文字</div>
-            <div>这是一段文字</div>
-            <div>这是一段文字</div>
-            <div>这是一段文字</div>
-            <div>这是一段文字</div>
-          </div>
+          {{ item.more }}
           <template #append> as </template>
         </EditBlock>
       </EditableTableColumn>
@@ -129,20 +129,34 @@
   const rules = {
     name: [
       {
-        validator: () => true,
+        validator: (value: string) => {
+          console.log('name = ', value);
+          return Boolean(value);
+        },
         message: '错了',
-        trigger: 'change',
+        trigger: 'blur',
       },
     ],
     age: [
       {
-        validator: () => true,
+        validator: (value: string) => {
+          console.log('validator', value);
+          return true;
+        },
         message: '错了没',
         trigger: 'change',
       },
     ],
   };
 
+  const handleClear = () => {
+    console.log('handleClear');
+  };
+
+  const handleChange = (value: string) => {
+    console.log(value);
+  };
+
   const handleSubmit = () => {
     isSubmiting.value = true;
     tableRef