diff --git a/dbm-ui/frontend/src/components/editable-table/Column.vue b/dbm-ui/frontend/src/components/editable-table/Column.vue
new file mode 100644
index 0000000000..c275ae8eeb
--- /dev/null
+++ b/dbm-ui/frontend/src/components/editable-table/Column.vue
@@ -0,0 +1,461 @@
+<template>
+  <td
+    v-if="isRowspanRender"
+    ref="rootRef"
+    class="bk-editable-table-body-column"
+    :class="{
+      'is-focused': isFocused,
+      'is-error': validateState.isError,
+      'is-disabled': Boolean(disabledTips),
+      [`is-column-fixed-${fixed}`]: fixed,
+      'is-previous-sibling-rowspan': isPreviousSiblingRowspan,
+    }"
+    :data-name="columnKey"
+    :rowspan="rowspan">
+    <div
+      v-bk-tooltips="{
+        content: disabledTips,
+        disabled: !disabledTips,
+      }"
+      class="bk-editable-table-field-cell">
+      <slot />
+      <div
+        v-if="validateState.isError"
+        class="bk-editable-table-column-error">
+        <slot
+          name="error"
+          v-bind="{ message: validateState.errorMessage }">
+          <i
+            v-bk-tooltips="validateState.errorMessage"
+            class="bk-dbm db-icon-exclamation-fill" />
+        </slot>
+      </div>
+    </div>
+  </td>
+</template>
+<script lang="ts">
+  import get from 'lodash/get';
+  import isFunction from 'lodash/isFunction';
+  import {
+    type ComponentInternalInstance,
+    computed,
+    getCurrentInstance,
+    inject,
+    type InjectionKey,
+    onBeforeUnmount,
+    provide,
+    reactive,
+    type VNode,
+  } from 'vue';
+
+  import { tableInjectKey } from './Index.vue';
+  import { injectKey } from './Row.vue';
+  import { type IRule } from './types';
+  import defaultValidator from './validator';
+
+  /* eslint-disable vue/no-unused-properties */
+  interface Props {
+    field?: string;
+    label: string;
+    rowspan?: number;
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    rules?: IRule[];
+    required?: boolean;
+    email?: boolean;
+    max?: number;
+    min?: number;
+    maxlength?: number;
+    fixed?: 'left' | 'right';
+    disabledMethod?: (rowData?: any, field?: string) => string | boolean;
+    description?: string;
+  }
+
+  interface Slots {
+    default: () => VNode;
+    head?: () => VNode;
+    headPrepend?: () => VNode;
+    headAppend?: () => VNode;
+    error?: (params: { message: string }) => VNode;
+  }
+
+  interface Expose {
+    validate: () => Promise<boolean>;
+  }
+
+  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>;
+  }
+
+  export const EditableTableColumnKey: InjectionKey<{
+    blur: () => void;
+    focus: () => void;
+    registerRules: (params: IRule[]) => void;
+    validate: () => Promise<boolean>;
+    clearValidate: () => void;
+  }> = Symbol('EditableTableColumnKey');
+</script>
+<script setup lang="ts">
+  const props = defineProps<Props>();
+  const slots = defineSlots<Slots>();
+
+  const tableContext = inject(tableInjectKey);
+  const rowContext = inject(injectKey);
+  const currentInstance = getCurrentInstance() as ComponentInternalInstance;
+
+  const columnKey = `bk-editable-table-column-${rowContext?.getColumnIndex()}`;
+
+  interface IFinalRule {
+    validator: (value: any) => Promise<boolean | string> | boolean | string;
+    message: string | (() => string);
+    trigger: string;
+  }
+
+  const getRulesFromProps = (props: Props) => {
+    const rules: (IFinalRule & {
+      required?: boolean;
+      email?: boolean;
+    })[] = [];
+
+    const label = props.label || '';
+    if (props.required) {
+      rules.push({
+        required: true,
+        validator: defaultValidator.required,
+        message: `${label}不能为空`,
+        trigger: 'change',
+      });
+    }
+    if (props.email) {
+      rules.push({
+        email: true,
+        validator: (value: string) => defaultValidator.email(value),
+        message: `${label}不是 email`,
+        trigger: 'change',
+      });
+    }
+    if (Number(props.max) > -1) {
+      rules.push({
+        validator: (value: number) => defaultValidator.max(value, props.max as number),
+        message: `${label}最大值 ${props.max}`,
+        trigger: 'change',
+      });
+    }
+    if (Number(props.min) > -1) {
+      rules.push({
+        validator: (value) => defaultValidator.min(value, props.min as number),
+        message: `${label}最小值 ${props.min}`,
+        trigger: 'change',
+      });
+    }
+    if (Number(props.maxlength) > -1) {
+      rules.push({
+        validator: (value) => defaultValidator.maxlength(value, props.maxlength as number),
+        message: `${label}最大长度 ${props.maxlength}`,
+        trigger: 'change',
+      });
+    }
+    return rules;
+  };
+
+  const mergeRules: (configRules: IRule[], propRules: ReturnType<typeof getRulesFromProps>) => IFinalRule[] = (
+    configRules,
+    propRules,
+  ) => {
+    let customRequired = false;
+    let customEmail = false;
+
+    const formatConfigRules = configRules.reduce<IFinalRule[]>((result, rule) => {
+      let rulevalidator: any;
+      if (rule.required) {
+        rulevalidator = isFunction(rule.validator) ? rule.validator : defaultValidator.required;
+        customRequired = true;
+      } else if (rule.email) {
+        rulevalidator = isFunction(rule.validator) ? rule.validator : defaultValidator.email;
+        customEmail = true;
+      } else if (Number(rule.max) > -1) {
+        rulevalidator = (value: any) => defaultValidator.max(value, rule.max as number);
+      } else if (Number(rule.min) > -1) {
+        rulevalidator = (value: any) => defaultValidator.min(value, rule.max as number);
+      } else if (Number(rule.maxlength) > -1) {
+        rulevalidator = (value: any) => defaultValidator.min(value, rule.max as number);
+      } else if (Object.prototype.toString.call(rule.pattern) === '[object RegExp]') {
+        rulevalidator = (value: any) => defaultValidator.pattern(value, rule.pattern as RegExp);
+      } else if (isFunction(rule.validator)) {
+        rulevalidator = rule.validator;
+      } else {
+        // 不支持的配置规则
+        return result;
+      }
+      result.push({
+        validator: rulevalidator,
+        message: rule.message,
+        trigger: rule.trigger || 'blur',
+      });
+      return result;
+    }, []);
+
+    // 自定义配置验证规则覆盖内置验证规则
+    const filterPropRules = propRules.reduce<IFinalRule[]>((result, ruleItem) => {
+      if (ruleItem.required && customRequired) {
+        return result;
+      }
+      if (ruleItem.email && customEmail) {
+        return result;
+      }
+      result.push(ruleItem);
+      return result;
+    }, []);
+
+    return [...filterPropRules, ...formatConfigRules];
+  };
+
+  let registerRules: IRule[] = [];
+
+  const rootRef = ref<HTMLElement>();
+  const isRowspanRender = ref(false);
+  const isFocused = ref(false);
+  const isPreviousSiblingRowspan = ref(false);
+
+  const validateState = reactive({
+    isError: false,
+    errorMessage: 'error',
+  });
+
+  const disabledTips = computed(() => {
+    if (!props.disabledMethod) {
+      return '';
+    }
+    const columnIndex = tableContext!.getColumnRelateRowIndexByInstance(currentInstance);
+
+    const result = props.disabledMethod(tableContext!.props.model[columnIndex], props.field);
+    if (typeof result === 'string') {
+      return result;
+    }
+    return result ? '无法操作' : '';
+  });
+
+  const validate = (): Promise<boolean> => {
+    if (!tableContext) {
+      return Promise.resolve(false);
+    }
+    // 没有设置 field 不进行验证
+    if (!props.field) {
+      return Promise.resolve(true);
+    }
+    let rules: IRule[] = [];
+    // 继承 form 的验证规则
+    if (tableContext && tableContext.props.rules && hasOwn(tableContext.props.rules, props.field)) {
+      rules = tableContext.props.rules[props.field];
+    }
+    // form-item 自己的 rules 规则优先级更高
+    if (props.rules) {
+      rules = props.rules as IRule[];
+    }
+
+    // 通过 useColumn 注册
+    if (registerRules.length > 0) {
+      rules = registerRules;
+    }
+
+    // 合并规则属性配置
+    const finalRuleList = mergeRules(rules, getRulesFromProps(props));
+
+    // 重新触发验证重置上次的验证状态
+    if (rules.length > 0) {
+      validateState.isError = false;
+      validateState.errorMessage = '';
+    }
+
+    const value = get(tableContext.props.model, props.field);
+
+    const doValidate = (() => {
+      let stepIndex = -1;
+      return (): Promise<boolean> => {
+        stepIndex = stepIndex + 1;
+        // 验证通过
+        if (stepIndex >= finalRuleList.length) {
+          tableContext.emits('validate', props.field || '', true, '');
+          return Promise.resolve(true);
+        }
+        const rule = finalRuleList[stepIndex];
+
+        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 === 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();
+        });
+      };
+    })();
+    return doValidate();
+  };
+
+  provide(EditableTableColumnKey, {
+    blur: () => {
+      isFocused.value = false;
+    },
+    focus: () => {
+      isFocused.value = true;
+    },
+    registerRules: (rules: IRule[]) => {
+      registerRules = rules;
+    },
+    validate,
+    clearValidate: () => {
+      validateState.isError = false;
+      validateState.errorMessage = '';
+    },
+  });
+
+  onMounted(() => {
+    rowContext?.registerColumn({
+      key: columnKey,
+      instance: currentInstance,
+      el: rootRef.value as HTMLElement,
+      props,
+      slots,
+      validate,
+    });
+
+    // 判断rowspan 在当前 column生效状态
+    const allColumnList = tableContext?.getAllColumnList() || [];
+    let rowspanNum = 0;
+    isRowspanRender.value = true;
+    allColumnList.forEach((rowColumnList) => {
+      rowColumnList.forEach((columnItem, columnIndex) => {
+        if (columnItem.key === columnKey) {
+          if (columnItem.props.rowspan && columnItem.props.rowspan > 1) {
+            if (rowspanNum === 0) {
+              rowspanNum = columnItem.props.rowspan;
+            }
+            rowspanNum = rowspanNum - 1;
+            isRowspanRender.value = rowspanNum < 1;
+          }
+          if (columnIndex > 0) {
+            isPreviousSiblingRowspan.value = Number(rowColumnList[columnIndex - 1]!.props.rowspan) > 1;
+          }
+        }
+      });
+    });
+  });
+
+  onBeforeUnmount(() => {
+    rowContext?.unregisterColumn(columnKey);
+    registerRules = [];
+  });
+
+  defineExpose<Expose>({
+    validate,
+  });
+</script>
+<style lang="less">
+  .bk-editable-table {
+    td.bk-editable-table-body-column {
+      &.is-focused {
+        z-index: 99;
+
+        &::before {
+          border-color: #3a84ff;
+        }
+      }
+
+      &.is-disabled {
+        .bk-editable-table-field-cell {
+          &::after {
+            position: absolute;
+            z-index: 1;
+            cursor: not-allowed;
+            content: '';
+            inset: 0;
+          }
+        }
+      }
+
+      &.is-error {
+        z-index: 99;
+        background: #fff1f1;
+
+        &::before {
+          border-color: #ea3636;
+        }
+
+        .bk-editable-table-field-cell {
+          background: #fff1f1;
+        }
+      }
+
+      &.is-previous-sibling-rowspan {
+        &::before {
+          left: -1px;
+        }
+      }
+    }
+  }
+
+  .bk-editable-table-field-cell {
+    position: relative;
+    display: flex;
+    height: 100%;
+    min-height: 40px;
+    align-items: center;
+  }
+
+  .bk-editable-table-column-error {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    z-index: 9;
+    display: flex;
+    height: 40px;
+    padding: 0 8px;
+    color: #ea3636;
+    align-items: center;
+    transform: translateY(-50%);
+  }
+</style>
diff --git a/dbm-ui/frontend/src/components/editable-table/Index.vue b/dbm-ui/frontend/src/components/editable-table/Index.vue
new file mode 100644
index 0000000000..9418755c18
--- /dev/null
+++ b/dbm-ui/frontend/src/components/editable-table/Index.vue
@@ -0,0 +1,410 @@
+<template>
+  <div class="bk-editable-table">
+    <div
+      ref="tableRef"
+      class="bk-editable-table-wrapper"
+      @scroll="handleContentScroll">
+      <table>
+        <RenderHeader
+          :column-list="columnList"
+          :column-size-config="columnSizeConfig"
+          @mousedown="handleMouseDown"
+          @mousemove="handleMouseMove" />
+        <tbody class="bk-editable-table-body">
+          <slot />
+        </tbody>
+      </table>
+    </div>
+    <div class="bk-editable-table-fixed-wrapper">
+      <div
+        class="bk-editable-table-fixed-left"
+        :style="leftFixedStyles" />
+      <div
+        class="bk-editable-table-fixed-right"
+        :style="rightFixedStyles" />
+    </div>
+    <div
+      ref="resizePlaceholderRef"
+      class="bk-editable-column-resize" />
+
+    <div class="bk-edit-table-scroll">
+      <div
+        ref="scrollX"
+        class="bk-edit-table-scroll-x"
+        @scroll="handleScrollX">
+        <div
+          class="bk-edit-table-scroll-x-inner"
+          :style="{
+            width: tableWidth === 'auto' ? 'auto' : `${tableWidth}px`,
+          }">
+          &nbsp;
+        </div>
+        &nbsp;
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import _ from 'lodash';
+  import { type ComponentInternalInstance, type InjectionKey, provide, ref, shallowRef, type VNode, watch } from 'vue';
+
+  import Column, { type IContext as IColumnContext } from './Column.vue';
+  import RenderHeader from './component/render-header/Index.vue';
+  import DatePicker from './edit/DatePicker.vue';
+  import Input from './edit/Input.vue';
+  import Select from './edit/Select.vue';
+  import TagInput from './edit/TagInput.vue';
+  import Text from './edit/Text.vue';
+  import Textarea from './edit/Textarea.vue';
+  import TimePicker from './edit/TimePicker.vue';
+  import useResize from './hooks/use-resize';
+  import useScroll from './hooks/use-scroll';
+  import Row from './Row.vue';
+  import { type IRule } from './types';
+  import useColumn from './useColumn';
+
+  /* eslint-disable vue/no-unused-properties */
+  interface Props {
+    model: Record<string, any>[];
+    rules?: Record<string, IRule[]>;
+  }
+
+  interface Emits {
+    (e: 'validate', property: string, result: boolean, message: string): boolean;
+  }
+
+  interface Slots {
+    default: () => VNode;
+  }
+
+  interface Expose {
+    validate: () => Promise<boolean>;
+    validateByRowIndex: (row: number | number[]) => Promise<boolean>;
+    validateByColumnIndex: (row: number | number[]) => Promise<boolean>;
+    validateByField: (row: string | string[]) => Promise<boolean>;
+  }
+
+  export const tableInjectKey: InjectionKey<{
+    props: Props;
+    emits: Emits;
+    registerRow: (rowColumnList: IColumnContext[]) => void;
+    updateRow: () => void;
+    unregisterRow: (rowColumnList: IColumnContext[]) => void;
+    getAllColumnList: () => IColumnContext[][];
+    getColumnRelateRowIndexByInstance: (columnInstance: ComponentInternalInstance) => number;
+  }> = Symbol.for('bk-editable-table');
+
+  export { Column, DatePicker, Input, Row, Select, TagInput, Text, Textarea, TimePicker, useColumn };
+</script>
+<script setup lang="ts">
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  defineSlots<Slots>();
+
+  defineOptions({
+    name: 'EditableTable',
+  });
+
+  const tableRef = ref<HTMLElement>();
+  const scrollX = ref<HTMLElement>();
+  const resizePlaceholderRef = ref<HTMLElement>();
+  const tableWidth = ref<'auto' | number>('auto');
+
+  const columnList = shallowRef<IColumnContext[]>([]);
+  const rowList = shallowRef<IColumnContext[][]>([]);
+
+  const { handleMouseDown, handleMouseMove, columnSizeConfig } = useResize(tableRef, resizePlaceholderRef, columnList);
+  const { leftFixedStyles, rightFixedStyles, initalScroll } = useScroll(tableRef);
+
+  watch(columnList, () => {
+    initalScroll();
+  });
+
+  watch(
+    columnSizeConfig,
+    () => {
+      nextTick(() => {
+        if (!tableRef.value) {
+          return;
+        }
+        tableWidth.value = tableRef.value.scrollWidth;
+        scrollX.value!.scrollLeft = tableRef.value!.scrollLeft;
+      });
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
+
+  const registerRow = (rowColumnList: IColumnContext[]) => {
+    rowList.value.push(rowColumnList);
+  };
+
+  const updateRow = _.throttle(() => {
+    columnList.value = rowList.value.length > 0 ? [...rowList.value[0]] : [];
+  }, 60);
+
+  const unregisterRow = (rowColumnList: IColumnContext[]) => {
+    rowList.value = rowList.value.filter((row) => row !== rowColumnList);
+  };
+
+  const getColumnRelateRowIndexByInstance = (columnInstance: ComponentInternalInstance) =>
+    _.findIndex(rowList.value, (rowColumnList) =>
+      _.some(rowColumnList, (column) => column.instance === columnInstance),
+    );
+
+  provide(tableInjectKey, {
+    props,
+    emits,
+    registerRow,
+    updateRow,
+    unregisterRow,
+    getAllColumnList: () => rowList.value,
+    getColumnRelateRowIndexByInstance,
+  });
+
+  const handleScrollX = _.throttle((event: Event) => {
+    tableRef.value!.scrollLeft = (event.target as Element)!.scrollLeft;
+  }, 30);
+
+  const handleContentScroll = _.throttle((event: Event) => {
+    scrollX.value!.scrollLeft = (event.target as Element)!.scrollLeft;
+    tableRef.value?.click();
+  }, 30);
+
+  defineExpose<Expose>({
+    validate() {
+      return Promise.all(_.flatten(rowList.value).map((column) => column.validate())).then(
+        () => true,
+        () => false,
+      );
+    },
+    validateByRowIndex(rowIndex: number | number[]) {
+      const rowIndexList = Array.isArray(rowIndex) ? rowIndex : [rowIndex];
+
+      const columnList = rowIndexList.reduce<IColumnContext[]>((result, index) => {
+        result.push(...rowList.value[index]);
+        return result;
+      }, []);
+
+      return Promise.all(columnList.map((column) => column.validate())).then(
+        () => true,
+        () => false,
+      );
+    },
+    validateByColumnIndex(columnIndex: number | number[]) {
+      const columnIndexList = Array.isArray(columnIndex) ? columnIndex : [columnIndex];
+
+      const columnList = rowList.value.reduce((result, rowItem) => {
+        columnIndexList.forEach((index) => {
+          result.push(rowItem[index]);
+        });
+        return result;
+      }, []);
+
+      return Promise.all(columnList.map((column) => column.validate())).then(
+        () => true,
+        () => false,
+      );
+    },
+    validateByField(field: string | string[]) {
+      const fieldList = Array.isArray(field) ? field : [field];
+
+      const columnList = rowList.value.reduce((result, rowItem) => {
+        fieldList.forEach((field) => {
+          rowItem.forEach((column) => {
+            if (column.props.field && column.props.field === field) {
+              result.push(column);
+            }
+          });
+        });
+        return result;
+      }, []);
+
+      return Promise.all(columnList.map((column) => column.validate())).then(
+        () => true,
+        () => false,
+      );
+    },
+  });
+</script>
+<style lang="less">
+  .bk-editable-table {
+    position: relative;
+    background: #fff;
+    transform: translate3d(0);
+
+    &::before {
+      position: absolute;
+      z-index: 9;
+      pointer-events: none;
+      border-right: 1px solid #dcdee5;
+      border-left: 1px solid #dcdee5;
+      content: '';
+      inset: 0;
+    }
+
+    .bk-editable-table-wrapper {
+      overflow: scroll hidden;
+
+      &::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+      }
+    }
+
+    table {
+      width: 100%;
+      text-align: left;
+      table-layout: fixed;
+    }
+
+    tbody {
+      tr {
+        td {
+          &::before {
+            top: -1px;
+          }
+        }
+      }
+    }
+
+    th,
+    td {
+      position: relative;
+      z-index: 0;
+      font-size: 12px;
+      font-weight: normal;
+
+      &::before {
+        position: absolute;
+        z-index: 99999;
+        pointer-events: none;
+        border: 1px solid #dcdee5;
+        content: '';
+        inset: 0;
+      }
+
+      &:nth-child(n + 2) {
+        &::before {
+          left: -1px;
+        }
+      }
+
+      &.is-column-fixed-left {
+        position: sticky;
+        left: 0;
+        z-index: 9;
+        background: #fff;
+      }
+
+      &.is-column-fixed-right {
+        position: sticky;
+        right: 0;
+        background: #fff;
+      }
+    }
+
+    th {
+      padding: 0 10px;
+      color: #313238;
+      background-color: #fafbfd;
+
+      &.is-column-fixed-left,
+      &.is-column-fixed-right {
+        background-color: #fafbfd;
+      }
+
+      &:hover {
+        background-color: #f0f1f5;
+      }
+    }
+
+    td {
+      padding: 0;
+
+      &.is-column-fixed-left,
+      &.is-column-fixed-right {
+        background: #fff;
+      }
+    }
+
+    &:hover {
+      .bk-edit-table-scroll-x {
+        opacity: 100%;
+      }
+    }
+  }
+
+  .bk-editable-table-fixed-wrapper {
+    position: absolute;
+    overflow: hidden;
+    pointer-events: none;
+    inset: 0;
+  }
+
+  .bk-editable-table-fixed-left {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    overflow-x: hidden;
+    pointer-events: none;
+    box-shadow: 8px 0 10px -5px rgb(0 0 0 / 12%);
+  }
+
+  .bk-editable-table-fixed-right {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    box-shadow: 8px 0 10px -5px rgb(0 0 0 / 12%);
+  }
+
+  .bk-editable-column-resize {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    display: none;
+    width: 1px;
+    background: #dfe0e5;
+  }
+
+  .bk-edit-table-scroll-x {
+    position: absolute;
+    right: 1px;
+    bottom: 0;
+    left: 1px;
+    z-index: 99999999;
+    height: 14px;
+    overflow: scroll hidden;
+    cursor: pointer;
+    opacity: 0%;
+    transition: 0.15s;
+
+    &::-webkit-scrollbar {
+      height: 6px;
+      transition: 0.15s;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: rgb(151 155 165 / 80%);
+      border-radius: 3px;
+    }
+
+    &:hover {
+      &::-webkit-scrollbar {
+        height: 14px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: rgb(151 155 165 / 90%);
+        border-radius: 7px;
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/components/editable-table/Row.vue b/dbm-ui/frontend/src/components/editable-table/Row.vue
new file mode 100644
index 0000000000..6f22c1d74c
--- /dev/null
+++ b/dbm-ui/frontend/src/components/editable-table/Row.vue
@@ -0,0 +1,63 @@
+<template>
+  <tr ref="rowRootRef">
+    <slot />
+  </tr>
+</template>
+<script lang="ts">
+  import _ from 'lodash';
+  import { inject, type InjectionKey, onBeforeMount, onMounted, provide } from 'vue';
+
+  import type { IContext as IColumnContext } from './Column.vue';
+  import { tableInjectKey } from './Index.vue';
+
+  export const injectKey: InjectionKey<{
+    registerColumn: (column: IColumnContext) => void;
+    unregisterColumn: (columnKey: string) => void;
+    getColumnIndex: () => number;
+  }> = Symbol.for('bk-editable-table-row');
+</script>
+<script setup lang="ts">
+  const tableContext = inject(tableInjectKey);
+
+  const rowRootRef = ref<HTMLElement>();
+
+  const columnList: IColumnContext[] = [];
+
+  const registerColumn = (column: IColumnContext) => {
+    const index = _.indexOf(rowRootRef.value!.children, column.el);
+    if (index > -1) {
+      columnList.splice(index, 0, column);
+    } else {
+      columnList.push(column);
+    }
+
+    tableContext?.updateRow();
+  };
+
+  const unregisterColumn = (columnKey: string) => {
+    _.remove(columnList, (item) => item.key === columnKey);
+    tableContext?.updateRow();
+  };
+
+  const getColumnIndex = (() => {
+    let columnIndex = 0;
+    return () => {
+      columnIndex = columnIndex + 1;
+      return columnIndex;
+    };
+  })();
+
+  provide(injectKey, {
+    registerColumn,
+    unregisterColumn,
+    getColumnIndex,
+  });
+
+  onMounted(() => {
+    tableContext?.registerRow(columnList);
+  });
+
+  onBeforeMount(() => {
+    tableContext?.unregisterRow(columnList);
+  });
+</script>
diff --git a/dbm-ui/frontend/src/components/editable-table/component/RenderColGroup.vue b/dbm-ui/frontend/src/components/editable-table/component/RenderColGroup.vue
new file mode 100644
index 0000000000..0bf83fbce9
--- /dev/null
+++ b/dbm-ui/frontend/src/components/editable-table/component/RenderColGroup.vue
@@ -0,0 +1,26 @@
+<template>
+  <colgroup>
+    <col
+      v-for="item in columnList"
+      :key="item.key"
+      :width="columnSizeMap[item.key].renderWidth ? columnSizeMap[item.key].renderWidth : ''" />
+  </colgroup>
+</template>
+<script setup lang="ts">
+  import type { IContext as IColumnContext } from '../Column.vue';
+
+  interface Props {
+    columnList: IColumnContext[];
+    columnSizeMap: Record<
+      string,
+      {
+        width?: number;
+        minWidth?: number;
+        maxWidth?: number;
+        renderWidth: number;
+      }
+    >;
+  }
+
+  defineProps<Props>();
+</script>
diff --git a/dbm-ui/frontend/src/components/editable-table/component/render-body/Index.vue b/dbm-ui/frontend/src/components/editable-table/component/render-body/Index.vue
new file mode 100644
index 0000000000..7d265f1541
--- /dev/null
+++ b/dbm-ui/frontend/src/components/editable-table/component/render-body/Index.vue
@@ -0,0 +1,28 @@
+<template>
+  <tbody>
+    <tr>
+      <RenderCell
+        v-for="(columnItem, index) in columnList"
+        :key="`#${index}}#${columnItem.props.field}`"
+        :column="columnItem" />
+    </tr>
+  </tbody>
+</template>
+<script setup lang="ts">
+  import type { IContext as IColumnContext } from '../../Column.vue';
+
+  import RenderCell from './render-cell';
+
+  interface Props {
+    columnList: IColumnContext[];
+  }
+
+  defineProps<Props>();
+</script>
+<style lang="less">
+  .bk-editable-table-cell {
+    display: flex;
+    min-height: 40px;
+    align-items: center;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/components/editable-table/component/render-body/render-cell.ts b/dbm-ui/frontend/src/components/editable-table/component/render-body/render-cell.ts
new file mode 100644
index 0000000000..099aab1f6c
--- /dev/null
+++ b/dbm-ui/frontend/src/components/editable-table/component/render-body/render-cell.ts
@@ -0,0 +1,29 @@
+import { defineComponent, h } from 'vue';
+
+import type { IContext as IColumnContext } from '../../Column.vue';
+
+export default defineComponent({
+  name: 'RenderColumnCell',
+  props: {
+    column: {
+      type: Object as () => IColumnContext,
+      required: true,
+    },
+  },
+  setup(props) {
+    return () =>
+      h(
+        'td',
+        {
+          class: 'bk-editable-table-body-column',
+        },
+        h(
+          'div',
+          {
+            class: 'bk-editable-table-cell',
+          },
+          props.column.slots.default(),
+        ),
+      );
+  },
+});
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
new file mode 100644
index 0000000000..d667c2bee9
--- /dev/null
+++ b/dbm-ui/frontend/src/components/editable-table/component/render-header/Index.vue
@@ -0,0 +1,74 @@
+<template>
+  <thead class="bk-editable-table-header">
+    <tr>
+      <RenderTh
+        v-for="(columnItem, index) in columnList"
+        :key="`#${index}}#${columnItem.key}`"
+        :class="{
+          [`is-column-fixed-${columnItem.props.fixed}`]: columnItem.props.fixed,
+        }"
+        :column="columnItem"
+        :style="{
+          width:
+            columnSizeConfig[columnItem.key].renderWidth > 0 ? `${columnSizeConfig[columnItem.key].renderWidth}px` : '',
+        }" />
+    </tr>
+  </thead>
+</template>
+<script setup lang="ts">
+  import type { IContext as IColumnContext } from '../../Column.vue';
+
+  import RenderTh from './render-th';
+
+  interface Props {
+    columnList: IColumnContext[];
+    columnSizeConfig: Record<string, Record<'renderWidth', number>>;
+  }
+
+  defineProps<Props>();
+</script>
+<style lang="less">
+  .bk-editable-table-header {
+    th.is-required {
+      .bk-editable-table-label-cell {
+        &::after {
+          margin-left: 4px;
+          line-height: 20px;
+          color: #ea3636;
+          content: '*';
+        }
+      }
+    }
+  }
+
+  .bk-editable-table-label-cell {
+    display: flex;
+    min-height: 40px;
+    align-items: center;
+    font-weight: normal;
+    color: #313238;
+  }
+
+  .bk-editable-table-th-prepend {
+    margin-right: 4px;
+  }
+
+  .bk-editable-table-th-text {
+    display: flex;
+    height: 20px;
+    overflow: hidden;
+    line-height: 20px;
+    text-overflow: ellipsis;
+    word-break: keep-all;
+    white-space: nowrap;
+  }
+
+  .bk-editable-table-th-text-description {
+    cursor: pointer;
+    border-bottom: 1px dashed #979ba5;
+  }
+
+  .bk-editable-table-th-append {
+    margin-left: 4px;
+  }
+</style>
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
new file mode 100644
index 0000000000..73f8fdc10e
--- /dev/null
+++ b/dbm-ui/frontend/src/components/editable-table/component/render-header/render-th.ts
@@ -0,0 +1,81 @@
+import { defineComponent, h, resolveDirective, withDirectives } from 'vue';
+
+import type { IContext as IColumnContext } from '../../Column.vue';
+
+export default defineComponent({
+  name: 'RenderColumnHead',
+  props: {
+    column: {
+      type: Object as () => IColumnContext,
+      required: true,
+    },
+  },
+  setup(props) {
+    return () => {
+      const childNode = [
+        withDirectives(
+          h(
+            'div',
+            {
+              class: {
+                'bk-editable-table-th-text': true,
+                'bk-editable-table-th-text-description': Boolean(props.column.props.description),
+              },
+            },
+            props.column.slots.head ? props.column.slots.head() : props.column.props.label || '',
+          ),
+          [
+            [
+              resolveDirective('bk-tooltips'),
+              {
+                content: props.column.props.description || '',
+                disabled: !props.column.props.description,
+              },
+            ],
+          ],
+        ),
+      ];
+
+      if (!props.column.slots.head && props.column.slots.headPrepend) {
+        childNode.unshift(
+          h(
+            'div',
+            {
+              class: 'bk-editable-table-th-prepend',
+            },
+            props.column.slots.headPrepend(),
+          ),
+        );
+      }
+
+      if (!props.column.slots.head && props.column.slots.headAppend) {
+        childNode.push(
+          h(
+            'div',
+            {
+              class: 'bk-editable-table-th-append',
+            },
+            props.column.slots.headAppend(),
+          ),
+        );
+      }
+      return h(
+        'th',
+        {
+          class: {
+            'bk-editable-table-header-column': true,
+            'is-required': props.column.props.required,
+          },
+          'data-name': props.column.key,
+        },
+        h(
+          'div',
+          {
+            class: 'bk-editable-table-label-cell',
+          },
+          childNode,
+        ),
+      );
+    };
+  },
+});
diff --git a/dbm-ui/frontend/src/components/editable-table/component/scroll-faker/Index.vue b/dbm-ui/frontend/src/components/editable-table/component/scroll-faker/Index.vue
new file mode 100644
index 0000000000..16ce4af95f
--- /dev/null
+++ b/dbm-ui/frontend/src/components/editable-table/component/scroll-faker/Index.vue
@@ -0,0 +1,256 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <div
+    ref="scrollBox"
+    class="scroll-faker"
+    :class="{
+      [`theme-${theme}`]: theme,
+    }"
+    :style="boxState.styles"
+    @mouseenter="handleCalcScroller">
+    <div
+      ref="scrollContent"
+      class="scroll-faker-content"
+      @mouseenter="handleContentMouseenter"
+      @mouseleave="handleContentMouseleave"
+      @scroll="handleContentScroll">
+      <slot />
+    </div>
+    <div
+      v-if="boxState.isRenderVerticalScroll"
+      ref="verticalScroll"
+      class="scrollbar-vertical"
+      @mouseenter="handleVerticalMouseenter"
+      @mouseleave="handleVerticalMouseleave"
+      @scroll="handleVerticalScroll">
+      <div
+        class="scrollbar-inner"
+        :style="{ height: `${boxState.contentScrollHeight}px` }">
+        &nbsp;
+      </div>
+    </div>
+    <div
+      v-if="boxState.isRenderHorizontalScrollbar"
+      ref="horizontalScrollbar"
+      class="scrollbar-horizontal"
+      @mouseenter="handleHorizontalMouseenter"
+      @mouseleave="handleHorizontalMouseleave"
+      @scroll="handleHorizontalScroll">
+      <div
+        class="scrollbar-inner"
+        :style="{ width: `${boxState.contentScrollWidth}px` }">
+        &nbsp;
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import _ from 'lodash';
+  import { onMounted, ref } from 'vue';
+
+  import useBoxState from './hooks/use-box-state';
+  import useContent from './hooks/use-content';
+  import useHorizotal from './hooks/use-horizotal';
+  import useVertical from './hooks/use-vertical';
+
+  export interface IContext {
+    $refs: {
+      scrollBox: any;
+      scrollContent: any;
+    };
+  }
+</script>
+<script setup lang="ts">
+  interface Props {
+    theme?: string;
+  }
+  withDefaults(defineProps<Props>(), {
+    theme: 'light',
+  });
+
+  const emit = defineEmits(['scroll']);
+
+  const scrollBox = ref();
+  const scrollContent = ref();
+  const verticalScroll = ref();
+  const horizontalScrollbar = ref();
+
+  const { state: boxState, initState } = useBoxState();
+
+  const { isContentScroll, mouseenter: handleContentMouseenter, mouseleave: handleContentMouseleave } = useContent();
+
+  const {
+    isVerticalScroll,
+    mouseenter: handleVerticalMouseenter,
+    mouseleave: handleVerticalMouseleave,
+  } = useVertical();
+
+  const { mouseenter: handleHorizontalMouseenter, mouseleave: handleHorizontalMouseleave } = useHorizotal();
+
+  // 初始化滚动状态
+  const handleCalcScroller = _.throttle(initState, 100);
+  // 内容区滚动
+  const handleContentScroll = _.throttle((event) => {
+    const { scrollTop, scrollLeft } = event.target;
+    if (isContentScroll.value && verticalScroll.value) {
+      verticalScroll.value.scrollTo(0, scrollTop);
+    }
+    if (isContentScroll.value && horizontalScrollbar.value) {
+      horizontalScrollbar.value.scrollLeft = scrollLeft;
+    }
+    emit('scroll', event);
+  }, 30);
+  // 垂直滚动条滚动
+  const handleVerticalScroll = _.throttle((event) => {
+    if (isVerticalScroll.value) {
+      scrollContent.value.scrollTop = event.target.scrollTop;
+    }
+  }, 30);
+  // 水平滚动条滚动
+  const handleHorizontalScroll = _.throttle((event) => {
+    if (isVerticalScroll.value) {
+      scrollContent.value.scrollTop = event.target.scrollLeft;
+    }
+  }, 30);
+
+  onMounted(() => {
+    handleCalcScroller();
+  });
+
+  const getScroll = () => {
+    const { scrollLeft, scrollTop } = scrollContent.value;
+    return {
+      scrollLeft,
+      scrollTop,
+    };
+  };
+
+  const scrollTo = (scrollLeft: number, scrollTop: number) => {
+    scrollContent.value.scrollTo(scrollLeft, scrollTop);
+  };
+
+  defineExpose({
+    getScroll,
+    scrollTo,
+    boxState,
+  });
+</script>
+<style lang="less">
+  .scroll-faker {
+    position: relative;
+    height: 100%;
+
+    &:hover {
+      & > .scrollbar-vertical,
+      & > .scrollbar-horizontal {
+        opacity: 100%;
+      }
+    }
+
+    &.theme-dark {
+      & > .scrollbar-vertical,
+      & > .scrollbar-horizontal {
+        &::-webkit-scrollbar-thumb {
+          background-color: rgb(255 255 255 / 20%);
+        }
+
+        &:hover {
+          &::-webkit-scrollbar-thumb {
+            background-color: rgb(255 255 255 / 28%);
+          }
+        }
+      }
+    }
+
+    & > .scroll-faker-content {
+      height: 100%;
+      overflow: scroll scroll;
+
+      &::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+      }
+    }
+
+    & > .scrollbar-vertical,
+    & > .scrollbar-horizontal {
+      z-index: 2;
+      cursor: pointer;
+      opacity: 0%;
+      transition: 0.15s;
+
+      &::-webkit-scrollbar-thumb {
+        background-color: rgb(151 155 165 / 80%);
+        border-radius: 3px;
+      }
+
+      &:hover {
+        z-index: 10000000;
+        opacity: 100%;
+
+        &::-webkit-scrollbar-thumb {
+          background-color: rgb(151 155 165 / 90%);
+          border-radius: 7px;
+        }
+      }
+    }
+
+    & > .scrollbar-vertical {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 14px;
+      overflow: hidden scroll;
+
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      &:hover {
+        &::-webkit-scrollbar {
+          width: 14px !important;
+        }
+      }
+
+      .scrollbar-inner {
+        width: 100%;
+      }
+    }
+
+    & > .scrollbar-horizontal {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      height: 14px;
+      overflow: scroll hidden;
+
+      &::-webkit-scrollbar {
+        height: 6px;
+      }
+
+      &:hover {
+        &::-webkit-scrollbar {
+          height: 14px !important;
+        }
+      }
+
+      .scrollbar-inner {
+        height: 100%;
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/components/editable-table/component/scroll-faker/hooks/use-box-state.ts b/dbm-ui/frontend/src/components/editable-table/component/scroll-faker/hooks/use-box-state.ts
new file mode 100644
index 0000000000..5a69f2a790
--- /dev/null
+++ b/dbm-ui/frontend/src/components/editable-table/component/scroll-faker/hooks/use-box-state.ts
@@ -0,0 +1,79 @@
+/*
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+ */
+
+import { type ComponentInternalInstance, getCurrentInstance, reactive } from 'vue';
+
+import type { IContext } from '../index.vue';
+
+export default function () {
+  const { proxy } = getCurrentInstance() as ComponentInternalInstance & { proxy: IContext };
+
+  const state = reactive({
+    contentScrollHeight: 0,
+    contentScrollWidth: 0,
+    isRenderVerticalScroll: false,
+    isRenderHorizontalScrollbar: false,
+    styles: {
+      width: '',
+      height: '',
+    },
+  });
+
+  const initState = () => {
+    if (proxy.$refs.scrollBox && proxy.$refs.scrollContent) {
+      const { scrollHeight, scrollWidth } = proxy.$refs.scrollContent as Element;
+      state.contentScrollHeight = scrollHeight;
+      state.contentScrollWidth = scrollWidth;
+
+      const { width: boxWidth, height: boxHeight } = proxy.$refs.scrollBox.getBoundingClientRect();
+      // 内容区高度大于容器高度显示垂直滚动条
+      state.isRenderVerticalScroll = Math.ceil(state.contentScrollHeight) > Math.ceil(boxHeight);
+      // 内容区宽度大于容器宽度显示水平滚动条
+      state.isRenderHorizontalScrollbar = Math.ceil(state.contentScrollWidth) > Math.ceil(boxWidth);
+      const styles = {
+        width: '100%',
+        height: '100%',
+        maxHeight: '',
+        maxWidth: '',
+      };
+      // 计算滚动容器的展示宽高
+      const {
+        height: scrollBoxStyleHeight,
+        maxHeight: scrollBoxStyleMaxHeight,
+        width: scrollBoxStyleWidth,
+        maxWidth: scrollBoxStyleMaxWidth,
+      } = proxy.$refs.scrollBox.style;
+      if (state.isRenderVerticalScroll) {
+        if (scrollBoxStyleHeight) {
+          styles.height = scrollBoxStyleHeight;
+        } else if (scrollBoxStyleMaxHeight) {
+          styles.maxHeight = scrollBoxStyleMaxHeight;
+        }
+      }
+      if (state.isRenderHorizontalScrollbar) {
+        if (scrollBoxStyleWidth) {
+          styles.width = scrollBoxStyleWidth;
+        } else if (scrollBoxStyleMaxWidth) {
+          styles.maxWidth = scrollBoxStyleMaxWidth;
+        }
+      }
+
+      state.styles = Object.freeze(styles);
+    }
+  };
+
+  return {
+    state,
+    initState,
+  };
+}
diff --git a/dbm-ui/frontend/src/components/editable-table/component/scroll-faker/hooks/use-content.ts b/dbm-ui/frontend/src/components/editable-table/component/scroll-faker/hooks/use-content.ts
new file mode 100644
index 0000000000..e896f4731a
--- /dev/null
+++ b/dbm-ui/frontend/src/components/editable-table/component/scroll-faker/hooks/use-content.ts
@@ -0,0 +1,36 @@
+/*
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+ */
+
+import { ref } from 'vue';
+
+export default function () {
+  const isContentScroll = ref(false);
+  /**
+   * @desc 鼠标在内容区状态
+   */
+  const mouseenter = () => {
+    isContentScroll.value = true;
+  };
+  /**
+   * @desc 鼠标离开内容区状态
+   */
+  const mouseleave = () => {
+    isContentScroll.value = false;
+  };
+
+  return {
+    isContentScroll,
+    mouseenter,
+    mouseleave,
+  };
+}
diff --git a/dbm-ui/frontend/src/components/editable-table/component/scroll-faker/hooks/use-horizotal.ts b/dbm-ui/frontend/src/components/editable-table/component/scroll-faker/hooks/use-horizotal.ts
new file mode 100644
index 0000000000..c753d046b2
--- /dev/null
+++ b/dbm-ui/frontend/src/components/editable-table/component/scroll-faker/hooks/use-horizotal.ts
@@ -0,0 +1,36 @@
+/*
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+ */
+
+import { ref } from 'vue';
+
+export default function () {
+  const isHorizontalScroll = ref(false);
+  /**
+   * @desc 鼠标在水平滚动条区域
+   */
+  const mouseenter = () => {
+    isHorizontalScroll.value = true;
+  };
+  /**
+   * @desc 鼠标离开水平滚动条区域
+   */
+  const mouseleave = () => {
+    isHorizontalScroll.value = false;
+  };
+
+  return {
+    isHorizontalScroll,
+    mouseenter,
+    mouseleave,
+  };
+}
diff --git a/dbm-ui/frontend/src/components/editable-table/component/scroll-faker/hooks/use-vertical.ts b/dbm-ui/frontend/src/components/editable-table/component/scroll-faker/hooks/use-vertical.ts
new file mode 100644
index 0000000000..8c3a59160a
--- /dev/null
+++ b/dbm-ui/frontend/src/components/editable-table/component/scroll-faker/hooks/use-vertical.ts
@@ -0,0 +1,36 @@
+/*
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+ */
+
+import { ref } from 'vue';
+
+export default function () {
+  const isVerticalScroll = ref(false);
+  /**
+   * @desc 鼠标在垂直滚动条区域
+   */
+  const mouseenter = () => {
+    isVerticalScroll.value = true;
+  };
+  /**
+   * @desc 鼠标离开垂直滚动条区域
+   */
+  const mouseleave = () => {
+    isVerticalScroll.value = false;
+  };
+
+  return {
+    isVerticalScroll,
+    mouseenter,
+    mouseleave,
+  };
+}
diff --git a/dbm-ui/frontend/src/components/editable-table/constants.ts b/dbm-ui/frontend/src/components/editable-table/constants.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/dbm-ui/frontend/src/components/editable-table/edit/DatePicker.vue b/dbm-ui/frontend/src/components/editable-table/edit/DatePicker.vue
new file mode 100644
index 0000000000..a7fc6f07ed
--- /dev/null
+++ b/dbm-ui/frontend/src/components/editable-table/edit/DatePicker.vue
@@ -0,0 +1,37 @@
+<template>
+  <BkDatePicker
+    append-to-body
+    class="bk-editable-date-picker"
+    @blur="handleBlur"
+    @focus="handleFocus" />
+</template>
+<script setup lang="ts">
+  import useColumn from '../useColumn';
+
+  const columnContext = useColumn();
+
+  const handleBlur = () => {
+    columnContext?.blur();
+  };
+
+  const handleFocus = () => {
+    columnContext?.focus();
+  };
+</script>
+<style lang="less">
+  .bk-editable-date-picker {
+    &.bk-date-picker {
+      width: 100%;
+
+      .icon-wrapper {
+        height: 40px;
+      }
+
+      .bk-date-picker-editor {
+        height: 40px;
+        background: transparent;
+        border: none;
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/components/editable-table/edit/Input.vue b/dbm-ui/frontend/src/components/editable-table/edit/Input.vue
new file mode 100644
index 0000000000..a530bb0a3e
--- /dev/null
+++ b/dbm-ui/frontend/src/components/editable-table/edit/Input.vue
@@ -0,0 +1,41 @@
+<template>
+  <BkInput
+    v-model="modelValue"
+    class="bk-editable-input"
+    @blur="handleBlur"
+    @focus="handleFocus" />
+</template>
+<script setup lang="ts">
+  import { watch } from 'vue';
+
+  import useColumn from '../useColumn';
+
+  const columnContext = useColumn();
+
+  const modelValue = defineModel<string>();
+
+  watch(modelValue, () => {
+    columnContext?.validate();
+  });
+
+  const handleBlur = () => {
+    columnContext?.blur();
+  };
+
+  const handleFocus = () => {
+    columnContext?.focus();
+  };
+</script>
+<style lang="less">
+  .bk-editable-input {
+    &.bk-input {
+      height: 40px;
+      border: none;
+      box-shadow: none !important;
+    }
+
+    .bk-input--text {
+      background: transparent;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/components/editable-table/edit/Select.vue b/dbm-ui/frontend/src/components/editable-table/edit/Select.vue
new file mode 100644
index 0000000000..d6ee9b6a5e
--- /dev/null
+++ b/dbm-ui/frontend/src/components/editable-table/edit/Select.vue
@@ -0,0 +1,36 @@
+<template>
+  <BkSelect
+    class="bk-editable-select"
+    @blur="handleBlur"
+    @focus="handleFocus">
+    <slot />
+  </BkSelect>
+</template>
+<script setup lang="ts">
+  import useColumn from '../useColumn';
+
+  const columnContext = useColumn();
+
+  const handleBlur = () => {
+    columnContext?.blur();
+  };
+
+  const handleFocus = () => {
+    columnContext?.focus();
+  };
+</script>
+<style lang="less">
+  .bk-editable-select {
+    width: 100%;
+
+    .bk-input {
+      height: 40px;
+      border: none;
+      box-shadow: none !important;
+    }
+
+    .bk-input--text {
+      background: transparent;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/components/editable-table/edit/TagInput.vue b/dbm-ui/frontend/src/components/editable-table/edit/TagInput.vue
new file mode 100644
index 0000000000..3f1d6ee34c
--- /dev/null
+++ b/dbm-ui/frontend/src/components/editable-table/edit/TagInput.vue
@@ -0,0 +1,44 @@
+<template>
+  <BkTagInput
+    v-model="modelValue"
+    allow-create
+    class="bk-editable-tag-input"
+    clearable
+    has-delete-icon
+    @blur="handleBlur"
+    @focus="handleFocus" />
+</template>
+<script setup lang="ts">
+  import { watch } from 'vue';
+
+  import useColumn from '../useColumn';
+
+  const columnContext = useColumn();
+
+  const modelValue = defineModel<string[]>();
+
+  watch(modelValue, () => {
+    columnContext?.validate();
+  });
+
+  const handleBlur = () => {
+    columnContext?.blur();
+  };
+
+  const handleFocus = () => {
+    columnContext?.focus();
+  };
+</script>
+<style lang="less">
+  .bk-editable-tag-input {
+    &.bk-tag-input {
+      width: 100%;
+
+      .bk-tag-input-trigger {
+        background: transparent;
+        border: none;
+        border-radius: 0;
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/components/editable-table/edit/Text.vue b/dbm-ui/frontend/src/components/editable-table/edit/Text.vue
new file mode 100644
index 0000000000..31b85e4bfc
--- /dev/null
+++ b/dbm-ui/frontend/src/components/editable-table/edit/Text.vue
@@ -0,0 +1,141 @@
+<template>
+  <div
+    class="bk-editable-text"
+    @blur="handleBlur"
+    @focus="handleFocus">
+    <div
+      v-if="slots.prepend"
+      class="text-prepend-wrapper">
+      <slot name="prepend" />
+    </div>
+    <div
+      class="text-content-wrapper"
+      :class="{
+        'is-show-prepend': Boolean(slots.prepend),
+        'is-show-append': Boolean(slots.append),
+      }">
+      <span ref="content">
+        <slot>
+          {{ modelValue }}
+        </slot>
+      </span>
+      <div
+        v-if="isShowPlacehoder"
+        class="text-content-placeholder">
+        {{ placeholder }}
+      </div>
+    </div>
+    <div
+      v-if="slots.append"
+      class="text-append-wrapper">
+      <slot name="append" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { onBeforeUpdate, ref, useTemplateRef, type VNode, watch } from 'vue';
+
+  import useColumn from '../useColumn';
+
+  interface Props {
+    placeholder?: string;
+  }
+
+  withDefaults(defineProps<Props>(), {
+    placeholder: '请设置值',
+  });
+
+  const slots = defineSlots<{
+    prepend?: () => VNode;
+    default?: () => VNode;
+    append?: () => VNode;
+  }>();
+
+  const columnContext = useColumn();
+
+  const modelValue = defineModel<string>();
+
+  const contentRef = useTemplateRef('content');
+
+  const isShowPlacehoder = ref(false);
+
+  watch(modelValue, () => {
+    columnContext?.validate();
+  });
+
+  const handleBlur = () => {
+    columnContext?.blur();
+  };
+
+  const handleFocus = () => {
+    columnContext?.focus();
+  };
+
+  onBeforeUpdate(() => {
+    isShowPlacehoder.value = !contentRef.value?.innerText;
+  });
+</script>
+<style lang="less">
+  .bk-editable-text {
+    position: relative;
+    display: flex;
+    width: 100%;
+    min-height: 40px;
+    align-items: center;
+    overflow: hidden;
+
+    .text-prepend-wrapper,
+    .text-append-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      padding: 0 8px;
+      user-select: none;
+    }
+
+    .text-prepend-wrapper {
+      padding-left: 10px;
+    }
+
+    .text-append-wrapper {
+      padding-right: 10px;
+      margin-left: auto;
+    }
+
+    .text-content-wrapper {
+      position: relative;
+      width: 100%;
+      min-height: 40px;
+      padding: 10px 0;
+      margin: 0 10px;
+      overflow: hidden;
+      line-height: 20px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 1;
+
+      &.is-show-prepend {
+        margin-left: 0;
+      }
+
+      &.is-show-append {
+        margin-right: 0;
+      }
+    }
+
+    .text-content-placeholder {
+      position: absolute;
+      display: flex;
+      height: 40px;
+      overflow: hidden;
+      font-size: 12px;
+      color: #c4c6cc;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      user-select: none;
+      align-items: center;
+      inset: 0;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/components/editable-table/edit/Textarea.vue b/dbm-ui/frontend/src/components/editable-table/edit/Textarea.vue
new file mode 100644
index 0000000000..d8aaf10a66
--- /dev/null
+++ b/dbm-ui/frontend/src/components/editable-table/edit/Textarea.vue
@@ -0,0 +1,46 @@
+<template>
+  <BkInput
+    v-model="modelValue"
+    autosize
+    class="bk-editable-input"
+    :resize="false"
+    type="textarea"
+    @blur="handleBlur"
+    @focus="handleFocus" />
+</template>
+<script setup lang="ts">
+  import { watch } from 'vue';
+
+  import useColumn from '../useColumn';
+
+  const columnContext = useColumn();
+
+  const modelValue = defineModel<string>();
+
+  watch(modelValue, () => {
+    columnContext?.validate();
+  });
+
+  const handleBlur = () => {
+    columnContext?.blur();
+  };
+
+  const handleFocus = () => {
+    columnContext?.focus();
+  };
+</script>
+<style lang="less">
+  .bk-editable-input {
+    &.bk-textarea {
+      min-height: 40px;
+      background: transparent;
+      border: none;
+      border-radius: none;
+      box-shadow: none !important;
+
+      textarea {
+        background: transparent;
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/components/editable-table/edit/TimePicker.vue b/dbm-ui/frontend/src/components/editable-table/edit/TimePicker.vue
new file mode 100644
index 0000000000..472b801390
--- /dev/null
+++ b/dbm-ui/frontend/src/components/editable-table/edit/TimePicker.vue
@@ -0,0 +1,37 @@
+<template>
+  <BkTimePicker
+    append-to-body
+    class="bk-editable-time-picker"
+    @blur="handleBlur"
+    @focus="handleFocus" />
+</template>
+<script setup lang="ts">
+  import useColumn from '../useColumn';
+
+  const columnContext = useColumn();
+
+  const handleBlur = () => {
+    columnContext?.blur();
+  };
+
+  const handleFocus = () => {
+    columnContext?.focus();
+  };
+</script>
+<style lang="less">
+  .bk-editable-time-picker {
+    &.bk-date-picker {
+      width: 100%;
+
+      .icon-wrapper {
+        height: 40px;
+      }
+
+      .bk-date-picker-editor {
+        height: 40px;
+        background: transparent;
+        border: none;
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/components/editable-table/hooks/use-column-tips.ts b/dbm-ui/frontend/src/components/editable-table/hooks/use-column-tips.ts
new file mode 100644
index 0000000000..e69de29bb2
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
new file mode 100644
index 0000000000..f0967d53df
--- /dev/null
+++ b/dbm-ui/frontend/src/components/editable-table/hooks/use-resize.ts
@@ -0,0 +1,194 @@
+import _ from 'lodash';
+import { onBeforeUnmount, onMounted, type Ref, ref, watch } from 'vue';
+
+import type { IContext as IColumnContext } from '../Column.vue';
+
+export default function (
+  tableRef: Ref<HTMLElement | undefined>,
+  tableColumnResizeRef: Ref<HTMLElement | undefined>,
+  columnList: Ref<IColumnContext[]>,
+) {
+  let dragable = false;
+
+  const columnSizeConfig = ref<
+    Record<
+      string,
+      {
+        width: number;
+        minWidth: number;
+        maxWidth: number;
+        renderWidth: number;
+      }
+    >
+  >({});
+
+  const dragging = ref(false);
+  const dragState = ref({
+    startMouseLeft: 0,
+    startLeft: 0,
+    startColumnLeft: 0,
+    tableLeft: 0,
+  });
+
+  watch(
+    columnList,
+    () => {
+      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,
+              },
+        });
+
+        return result;
+      }, {});
+      console.log('columnSizeConfig.value = ', columnSizeConfig.value);
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  const handleMouseDown = (event: MouseEvent) => {
+    if (!dragable) {
+      return;
+    }
+    dragging.value = true;
+
+    const tableEl = tableRef.value;
+    const tableLeft = tableEl!.getBoundingClientRect().left;
+    const columnEl = event.target as HTMLElement;
+    const columnRect = columnEl!.getBoundingClientRect();
+
+    const columnKey = columnEl.dataset.name as string;
+
+    const minLeft = columnRect.left - tableLeft + 30;
+
+    dragState.value = {
+      startMouseLeft: event.clientX,
+      startLeft: columnRect.right - tableLeft,
+      startColumnLeft: columnRect.left - tableLeft,
+      tableLeft,
+    };
+    const resizeProxy = tableColumnResizeRef.value as HTMLElement;
+    resizeProxy.style.display = 'block';
+    resizeProxy.style.left = `${dragState.value.startLeft}px`;
+
+    document.onselectstart = function () {
+      return false;
+    };
+    document.ondragstart = function () {
+      return false;
+    };
+
+    const handleMouseMove = (event: MouseEvent) => {
+      const deltaLeft = event.clientX - dragState.value.startMouseLeft;
+      const proxyLeft = dragState.value.startLeft + deltaLeft;
+      resizeProxy.style.display = 'block';
+      resizeProxy.style.left = `${Math.max(minLeft, proxyLeft)}px`;
+    };
+
+    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 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].renderWidth = realWidth;
+      }
+
+      dragable = false;
+
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.onselectstart = null;
+      document.ondragstart = null;
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  };
+
+  const handleMouseMove = (event: MouseEvent) => {
+    const target = (event.target as HTMLElement).closest('th');
+
+    if (!target) {
+      return;
+    }
+
+    const rect = target!.getBoundingClientRect();
+
+    const bodyStyle = document.body.style;
+    if (rect.width > 12 && rect.right - event.pageX < 16) {
+      bodyStyle.cursor = 'col-resize';
+      bodyStyle.userSelect = 'none';
+      dragable = true;
+    } else if (!dragging.value) {
+      bodyStyle.cursor = '';
+      bodyStyle.userSelect = '';
+      dragable = false;
+    }
+  };
+
+  const handleOuterMousemove = _.throttle((event: Event) => {
+    let i = event.composedPath().length - 1;
+    while (i >= 0) {
+      const target = event.composedPath()[i] as HTMLElement;
+      if (target.classList && target.classList.contains('bk-editable-table')) {
+        return;
+      }
+      i = i - 1;
+    }
+    document.body.style.cursor = '';
+  }, 500);
+
+  onMounted(() => {
+    document.addEventListener('mousemove', handleOuterMousemove);
+  });
+
+  onBeforeUnmount(() => {
+    document.removeEventListener('mousemove', handleOuterMousemove);
+  });
+
+  return {
+    columnSizeConfig,
+    handleMouseDown,
+    handleMouseMove,
+  };
+}
diff --git a/dbm-ui/frontend/src/components/editable-table/hooks/use-scroll.ts b/dbm-ui/frontend/src/components/editable-table/hooks/use-scroll.ts
new file mode 100644
index 0000000000..c9030713a2
--- /dev/null
+++ b/dbm-ui/frontend/src/components/editable-table/hooks/use-scroll.ts
@@ -0,0 +1,57 @@
+import _ from 'lodash';
+import { onBeforeUnmount, onMounted, type Ref, shallowRef } from 'vue';
+
+export default function (tableContentRef: Ref<HTMLElement | undefined>) {
+  const leftFixedStyles = shallowRef({});
+  const rightFixedStyles = shallowRef({});
+
+  const handleHorizontalScroll = _.throttle(() => {
+    const tableEl = tableContentRef.value as HTMLElement;
+    const { scrollLeft } = tableEl;
+    const tableContentWidth = tableEl.getBoundingClientRect().width;
+    const tableWidth = tableEl.querySelector('table')!.getBoundingClientRect().width;
+    if (scrollLeft === 0) {
+      leftFixedStyles.value = {
+        display: 'none',
+      };
+    } else {
+      const fixedColumns = tableEl.querySelectorAll('th.is-column-fixed-left');
+      const fixedWidth = Array.from(fixedColumns).reduce(
+        (result, itemEl) => result + itemEl.getBoundingClientRect().width,
+        0,
+      );
+      leftFixedStyles.value = {
+        width: `${fixedWidth}px`,
+      };
+    }
+
+    if (tableContentWidth + scrollLeft >= tableWidth) {
+      rightFixedStyles.value = {
+        display: 'none',
+      };
+    } else {
+      const fixedRightColumns = tableEl.querySelectorAll('th.is-column-fixed-right');
+      const fixeRightdWidth = Array.from(fixedRightColumns).reduce(
+        (result, itemEl) => result + itemEl.getBoundingClientRect().width,
+        0,
+      );
+      rightFixedStyles.value = {
+        width: `${fixeRightdWidth}px`,
+      };
+    }
+  }, 30);
+
+  onMounted(() => {
+    const tableEl = tableContentRef.value as HTMLElement;
+    tableEl.addEventListener('scroll', handleHorizontalScroll);
+    onBeforeUnmount(() => {
+      tableEl.removeEventListener('scroll', handleHorizontalScroll);
+    });
+  });
+
+  return {
+    leftFixedStyles,
+    rightFixedStyles,
+    initalScroll: handleHorizontalScroll,
+  };
+}
diff --git a/dbm-ui/frontend/src/components/editable-table/types.ts b/dbm-ui/frontend/src/components/editable-table/types.ts
new file mode 100644
index 0000000000..627b8f6f9d
--- /dev/null
+++ b/dbm-ui/frontend/src/components/editable-table/types.ts
@@ -0,0 +1,11 @@
+export interface IRule {
+  required?: boolean;
+  email?: boolean;
+  min?: number;
+  max?: number;
+  maxlength?: number;
+  pattern?: RegExp;
+  validator?: (value: any) => Promise<boolean | string> | boolean | string;
+  message: (() => string) | string;
+  trigger: string;
+}
diff --git a/dbm-ui/frontend/src/components/editable-table/useColumn.ts b/dbm-ui/frontend/src/components/editable-table/useColumn.ts
new file mode 100644
index 0000000000..075c4cb9b3
--- /dev/null
+++ b/dbm-ui/frontend/src/components/editable-table/useColumn.ts
@@ -0,0 +1,22 @@
+import { inject } from 'vue';
+
+import { EditableTableColumnKey } from './Column.vue';
+import { type IRule } from './types';
+
+export default (
+  options = {} as {
+    rules?: IRule[];
+  },
+) => {
+  const columnContext = inject(EditableTableColumnKey);
+
+  // if (!columnContext) {
+  //   throw new Error('not found EditColumn');
+  // }
+
+  if (columnContext && options.rules) {
+    columnContext.registerRules(options.rules);
+  }
+
+  return columnContext;
+};
diff --git a/dbm-ui/frontend/src/components/editable-table/validator.ts b/dbm-ui/frontend/src/components/editable-table/validator.ts
new file mode 100644
index 0000000000..c9912af514
--- /dev/null
+++ b/dbm-ui/frontend/src/components/editable-table/validator.ts
@@ -0,0 +1,20 @@
+import isDate from 'lodash/isDate';
+import isEmpty from 'lodash/isEmpty';
+
+export default {
+  required: (value: any): boolean => {
+    if (typeof value === 'number' || typeof value === 'boolean' || isDate(value)) {
+      return true;
+    }
+    return !isEmpty(value);
+  },
+  min: (value: number, min: number): boolean => value >= min,
+  max: (value: number, max: number): boolean => max >= value,
+  email: (value: string): boolean => /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(value),
+  maxlength: (value: string, maxlength: number): boolean => value.length <= maxlength,
+  pattern: (value: string, pattern: RegExp): boolean => {
+    const result = pattern.test(value);
+    pattern.lastIndex = 0; // eslint-disable-line no-param-reassign
+    return result;
+  },
+};
diff --git a/dbm-ui/frontend/src/components/resource-host-owner/Index.vue b/dbm-ui/frontend/src/components/resource-host-owner/Index.vue
new file mode 100644
index 0000000000..2aa7905f2e
--- /dev/null
+++ b/dbm-ui/frontend/src/components/resource-host-owner/Index.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="resource-host-owner">
+    <BkTag :theme="isForBiz ? 'success' : undefined">
+      {{ t('所属业务') }}: {{ isForBiz ? props.data.for_biz.bk_biz_name : t('公共资源池') }}
+    </BkTag>
+    <BkTag :theme="isForDb ? 'success' : undefined">
+      {{ t('所属DB') }}: {{ isForDb ? DBTypeInfos[data.resource_type as DBTypes].name : t('通用') }}
+    </BkTag>
+    <BkTag
+      v-for="labelItem in data.labels"
+      :key="labelItem.id">
+      {{ labelItem.name || '--' }}
+    </BkTag>
+  </div>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import DbResourceModel from '@services/model/db-resource/DbResource';
+
+  import { DBTypeInfos, DBTypes } from '@common/const';
+
+  interface Props {
+    data: DbResourceModel;
+  }
+
+  const props = defineProps<Props>();
+
+  const { t } = useI18n();
+
+  const isForBiz = computed(() => props.data.for_biz.bk_biz_id);
+  const isForDb = computed(() => props.data.resource_type && props.data.resource_type !== 'PUBLIC');
+</script>
+<style lang="less">
+  .resource-host-owner {
+    display: inline-flex;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/components/resource-host-selector/Index.vue b/dbm-ui/frontend/src/components/resource-host-selector/Index.vue
new file mode 100644
index 0000000000..d6cf5fcc31
--- /dev/null
+++ b/dbm-ui/frontend/src/components/resource-host-selector/Index.vue
@@ -0,0 +1,280 @@
+<template>
+  <BkDialog
+    class="resource-host-selector"
+    :close-icon="false"
+    :is-show="isShow"
+    :width="dialogWidth">
+    <template #header>
+      <PanelTab v-model="currentPanelTab" />
+    </template>
+    <div>
+      <DbSearchSelect
+        v-model="searchSelectValue"
+        :data="searchSelectData" />
+      <div class="host-list-wrapper mt-16">
+        <DbTable
+          ref="table"
+          :container-height="contentHeight"
+          :data-source="dataSource"
+          :height="contentHeight">
+          <BkTableColumn
+            fixed="left"
+            :resizable="false"
+            :width="60">
+            <template #default="{ data }">
+              <BkCheckbox
+                v-if="multiple"
+                label
+                :model-value="Boolean(rowSelectMemo[data.bk_host_id])"
+                @change="() => handleSelectChange(data)" />
+              <BkRadio
+                v-else
+                label
+                :model-value="Boolean(rowSelectMemo[data.bk_host_id])"
+                @change="() => handleSelectChange(data)" />
+            </template>
+          </BkTableColumn>
+          <BkTableColumn
+            field="ip"
+            fixed="left"
+            label="IP"
+            :min-width="150" />
+          <BkTableColumn
+            field="bk_cloud_name"
+            :label="t('管控区域')"
+            :min-width="120" />
+          <BkTableColumn
+            field="agent_status"
+            :label="t('Agent 状态')"
+            :min-width="120">
+            <template #default="{ data }">
+              <HostAgentStatus :data="data.agent_status" />
+            </template>
+          </BkTableColumn>
+          <BkTableColumn
+            field="bk_cpu"
+            :label="t('资源归属')"
+            :min-width="300">
+            <template #default="{ data }">
+              <ResourceHostOwner :data="data" />
+            </template>
+          </BkTableColumn>
+          <BkTableColumn
+            field="rack_id"
+            :label="t('机架')"
+            :min-width="120">
+            <template #default="{ data }">
+              {{ data.rack_id || '--' }}
+            </template>
+          </BkTableColumn>
+          <BkTableColumn
+            field="device_class"
+            :label="t('机型')"
+            :min-width="120">
+            <template #default="{ data }">
+              {{ data.device_class || '--' }}
+            </template>
+          </BkTableColumn>
+          <BkTableColumn
+            field="os_type"
+            :label="t('操作系统类型')"
+            :min-width="120">
+            <template #default="{ data }">
+              {{ data.os_type || '--' }}
+            </template>
+          </BkTableColumn>
+          <BkTableColumn
+            field="city"
+            :label="t('地域')"
+            :min-width="120">
+            <template #default="{ data }">
+              {{ data.city || '--' }}
+            </template>
+          </BkTableColumn>
+          <BkTableColumn
+            field="sub_zone"
+            :label="t('园区')"
+            :min-width="120">
+            <template #default="{ data }">
+              {{ data.sub_zone || '--' }}
+            </template>
+          </BkTableColumn>
+          <BkTableColumn
+            field="bk_cpu"
+            :label="t('CPU(核)')"
+            :min-width="120">
+            <template #default="{ data }">
+              {{ data.bk_cpu || '--' }}
+            </template>
+          </BkTableColumn>
+          <BkTableColumn
+            field="bkMemText"
+            :label="t('内存')"
+            :min-width="120">
+            <template #default="{ data }">
+              {{ data.bkMemText || '--' }}
+            </template>
+          </BkTableColumn>
+          <BkTableColumn
+            field="bk_disk"
+            :label="t('磁盘容量(G)')"
+            :min-width="100">
+            <template #default="{ data }">
+              <DiskPopInfo
+                :data="data.storage_device"
+                trigger="click">
+                <BkButton
+                  text
+                  theme="primary">
+                  {{ data.bk_disk }}
+                </BkButton>
+              </DiskPopInfo>
+            </template>
+          </BkTableColumn>
+        </DbTable>
+      </div>
+    </div>
+    <template #footer>
+      <BkButton
+        theme="primary"
+        @click="handleSubmit">
+        {{ t('确定') }}
+      </BkButton>
+      <BkButton
+        class="ml-8"
+        @click="handleCancel">
+        {{ t('取消') }}
+      </BkButton>
+    </template>
+  </BkDialog>
+</template>
+<script setup lang="ts">
+  import { useTemplateRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import DbResourceModel from '@services/model/db-resource/DbResource';
+  import { fetchList } from '@services/source/dbresourceResource';
+
+  import DiskPopInfo from '@components/disk-pop-info/DiskPopInfo.vue';
+  import HostAgentStatus from '@components/host-agent-status/Index.vue';
+  import ResourceHostOwner from '@components/resource-host-owner/Index.vue';
+
+  import PanelTab from './components/PanelTab.vue';
+  import useSearchSelectData from './hooks/use-search-select-data';
+
+  interface Props {
+    multiple?: boolean;
+    params?: {
+      bk_biz_id?: number;
+      bk_cloud_ids?: string;
+      resource_type?: string;
+      os_type?: string;
+    };
+  }
+
+  interface Emits {
+    (e: 'change', value: IValue[]): void;
+  }
+
+  interface IValue {
+    bk_biz_id: number;
+    bk_cloud_id: number;
+    bk_host_id: number;
+    ip: string;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    multiple: true,
+    params: () => ({}),
+  });
+
+  const emits = defineEmits<Emits>();
+
+  const dialogWidth = Math.max(window.innerWidth * 0.8, 800);
+  const contentHeight = window.innerHeight * 0.8 - 100;
+
+  const { t } = useI18n();
+  const { searchSelectData, value: searchSelectValue, formatSearchValue } = useSearchSelectData(props);
+  const isShow = defineModel<boolean>('isShow', {
+    default: false,
+  });
+
+  const modelValue = defineModel<IValue[]>({
+    default: () => [],
+  });
+
+  const dbTableRef = useTemplateRef('table');
+  const currentPanelTab = ref('host');
+  const rowSelectMemo = shallowRef<Record<number, DbResourceModel>>({});
+
+  const dataSource = (params: ServiceParameters<typeof fetchList>) =>
+    fetchList({
+      ...params,
+      ...props.params,
+    });
+
+  watch(searchSelectValue, () => {
+    dbTableRef.value?.fetchData(formatSearchValue.value);
+  });
+
+  watch(isShow, () => {
+    rowSelectMemo.value = modelValue.value.reduce(
+      (result, item) =>
+        Object.assign(result, {
+          [item.bk_host_id]: item,
+        }),
+      {},
+    );
+  });
+
+  const handleSelectChange = (data: DbResourceModel) => {
+    const latestSelectMemo = { ...rowSelectMemo.value };
+    if (props.multiple) {
+      if (latestSelectMemo[data.bk_host_id]) {
+        delete latestSelectMemo[data.bk_host_id];
+      } else {
+        latestSelectMemo[data.bk_host_id] = data;
+      }
+      rowSelectMemo.value = latestSelectMemo;
+    } else {
+      rowSelectMemo.value = {
+        [data.bk_host_id]: data,
+      };
+    }
+  };
+
+  const handleSubmit = () => {
+    isShow.value = false;
+    modelValue.value = Object.values(rowSelectMemo.value).map((item) => ({
+      bk_biz_id: item.bk_biz_id,
+      bk_cloud_id: item.bk_cloud_id,
+      bk_host_id: item.bk_host_id,
+      ip: item.ip,
+    }));
+    emits('change', modelValue.value);
+  };
+
+  const handleCancel = () => {
+    isShow.value = false;
+  };
+</script>
+<style lang="less">
+  .resource-host-selector {
+    .bk-dialog-header {
+      padding: 0;
+    }
+
+    .host-title {
+      display: flex;
+      height: 32px;
+      margin: 0 16px;
+      color: #3a84ff;
+      background: #e1ecff;
+      align-items: center;
+    }
+
+    .host-list-wrapper {
+      padding: 0;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/components/resource-host-selector/components/PanelTab.vue b/dbm-ui/frontend/src/components/resource-host-selector/components/PanelTab.vue
new file mode 100644
index 0000000000..030909208b
--- /dev/null
+++ b/dbm-ui/frontend/src/components/resource-host-selector/components/PanelTab.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="resource-host-selector-panel-tab">
+    <div
+      class="tab-item"
+      :class="{ active: modelValue === 'host' }"
+      @click="handleChange('host')">
+      {{ t('资源池主机') }}
+    </div>
+    <div class="tab-item"></div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  const { t } = useI18n();
+
+  const modelValue = defineModel<string>({
+    default: 'host',
+  });
+
+  const handleChange = (value: string) => {
+    modelValue.value = value;
+  };
+</script>
+<style lang="less">
+  .resource-host-selector-panel-tab {
+    display: flex;
+    font-size: 14px;
+    font-weight: normal;
+    background: #fafbfd;
+    border-bottom: 1px solid #dcdee5;
+
+    .tab-item {
+      display: flex;
+      height: 40px;
+      color: #63656e;
+      text-align: center;
+      border-right: 1px solid #dcdee5;
+      align-items: center;
+      justify-content: center;
+      flex: 1;
+
+      &.active {
+        position: relative;
+        color: #313238;
+        cursor: default;
+        background: #fff;
+
+        &::after {
+          position: absolute;
+          bottom: -2px;
+          left: 0;
+          width: 100%;
+          height: 3px;
+          background: #fff;
+          content: '';
+        }
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/components/resource-host-selector/hooks/use-search-select-data.ts b/dbm-ui/frontend/src/components/resource-host-selector/hooks/use-search-select-data.ts
new file mode 100644
index 0000000000..769c293cbf
--- /dev/null
+++ b/dbm-ui/frontend/src/components/resource-host-selector/hooks/use-search-select-data.ts
@@ -0,0 +1,124 @@
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRequest } from 'vue-request';
+
+import { fetchDiskTypes, fetchMountPoints, getOsTypeList } from '@services/source/dbresourceResource';
+import { fetchDbTypeList } from '@services/source/infras';
+import { getCloudList } from '@services/source/ipchooser';
+
+import { useGlobalBizs } from '@stores';
+
+import type { SearchValue } from '@components/vue2/search-select/index.vue';
+
+import { getSearchSelectorParams } from '@utils';
+
+export default (props: any) => {
+  const { t } = useI18n();
+  const globalBizsStore = useGlobalBizs();
+
+  const value = ref<SearchValue[]>([]);
+
+  const searchSelectData = computed(() => {
+    const serachList = [
+      {
+        name: 'IP',
+        id: 'hosts',
+      },
+      {
+        name: t('所属业务'),
+        id: 'bk_biz_id',
+        children: globalBizsStore.bizs.map((item) => ({
+          id: `${item.bk_biz_id}`,
+          name: item.name,
+        })),
+      },
+      {
+        name: t('所属DB类型'),
+        id: 'resource_type',
+        children: [{ id: 'PUBLIC', name: t('通用') }].concat(dbTypeList.value ?? []),
+      },
+      {
+        name: t('管控区域'),
+        id: 'bk_cloud_ids',
+        children: cloudList.value?.map((item) => ({
+          id: item.bk_cloud_id,
+          name: item.bk_cloud_name,
+        })),
+      },
+      {
+        name: t('Agent 状态'),
+        id: 'agent_status',
+        children: [
+          {
+            name: t('正常'),
+            id: '1',
+          },
+          {
+            name: t('异常'),
+            id: '0',
+          },
+        ],
+      },
+      {
+        name: t('操作系统类型'),
+        id: 'mount_point',
+        children: osTypeList.value?.map((item) => ({
+          id: item,
+          name: item,
+        })),
+      },
+      {
+        name: t('磁盘挂载点'),
+        id: 'mount_point',
+        children: mountPointList.value?.map((item) => ({
+          id: item,
+          name: item,
+        })),
+      },
+      {
+        name: t('磁盘类型'),
+        id: 'disk_type',
+        children: diskTypeList.value?.map((item) => ({
+          id: item,
+          name: item,
+        })),
+      },
+    ];
+
+    return serachList.filter((item) => props.params[item.id] === undefined);
+  });
+
+  const formatSearchValue = computed(() => getSearchSelectorParams(value.value));
+
+  const { data: cloudList } = useRequest(getCloudList, {
+    initialData: [],
+  });
+
+  const { data: diskTypeList } = useRequest(fetchDiskTypes, {
+    initialData: [],
+  });
+
+  const { data: mountPointList } = useRequest(fetchMountPoints, {
+    initialData: [],
+  });
+
+  const { data: osTypeList } = useRequest(getOsTypeList, {
+    defaultParams: [
+      {
+        offset: 0,
+        limit: -1,
+      },
+    ],
+    initialData: [],
+  });
+
+  const { data: dbTypeList } = useRequest(fetchDbTypeList, {
+    initialData: [],
+  });
+
+  return {
+    value,
+    searchSelectData,
+    formatSearchValue,
+  };
+};