From 5f8ed20e1875aea7caca47d1b58d4182a27de1eb Mon Sep 17 00:00:00 2001
From: hLinx <327159425@qq.com>
Date: Thu, 12 Dec 2024 11:59:08 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E5=B7=A5=E5=85=B7=E7=AE=B1?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=B5=84=E6=BA=90=E6=B1=A0=E5=8D=8F=E8=AE=AE?=
 =?UTF-8?q?=E5=8F=98=E6=9B=B4=5Feditable=5Ftable=20#8076=20#=20Reviewed,?=
 =?UTF-8?q?=20transaction=20id:=2026753?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dbm-ui/frontend/package.json                  |   2 +-
 .../src/components/editable-table/Column.vue  | 122 +++++++++++++-----
 .../src/components/editable-table/Index.vue   |  21 +--
 .../src/components/editable-table/Row.vue     |   4 +-
 .../components/editable-table/edit/Input.vue  |  17 ++-
 .../editable-table/hooks/use-scroll.ts        |   6 +-
 .../src/components/editable-table/types.ts    |   2 +-
 dbm-ui/frontend/src/demo/Index.vue            |  50 ++++---
 .../toolbox-field/edit-cluster/Index.vue      |   9 --
 .../toolbox-field/edit-table-name/Index.vue   |   9 --
 .../toolbox-field/operation-column/Index.vue  | 118 +++++++++++++++++
 11 files changed, 272 insertions(+), 88 deletions(-)
 delete mode 100644 dbm-ui/frontend/src/views/db-manage/common/toolbox-field/edit-cluster/Index.vue
 delete mode 100644 dbm-ui/frontend/src/views/db-manage/common/toolbox-field/edit-table-name/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/common/toolbox-field/operation-column/Index.vue

diff --git a/dbm-ui/frontend/package.json b/dbm-ui/frontend/package.json
index 1d38e3939a..08821ad7c3 100644
--- a/dbm-ui/frontend/package.json
+++ b/dbm-ui/frontend/package.json
@@ -27,7 +27,7 @@
     "@icon-cool/bk-icon-bk-biz-components": "0.0.4",
     "@vueuse/core": "^11.0.3",
     "axios": "^1.7.7",
-    "bkui-vue": "2.0.1-beta.78",
+    "bkui-vue": "2.0.1-beta.84",
     "date-fns": "3.6.0",
     "dayjs": "^1.11.13",
     "echarts": "^5.5.1",
diff --git a/dbm-ui/frontend/src/components/editable-table/Column.vue b/dbm-ui/frontend/src/components/editable-table/Column.vue
index e85fd9fbb2..7d314809e6 100644
--- a/dbm-ui/frontend/src/components/editable-table/Column.vue
+++ b/dbm-ui/frontend/src/components/editable-table/Column.vue
@@ -19,17 +19,7 @@
       }"
       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
         v-if="loading"
         class="bk-editable-table-column-loading">
@@ -38,12 +28,22 @@
         </div>
       </div>
     </div>
+    <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>
   </td>
 </template>
 <script lang="ts">
   import { Loading } from 'bkui-vue/lib/icon';
-  import get from 'lodash/get';
-  import isFunction from 'lodash/isFunction';
+  import _ from 'lodash';
   import {
     type ComponentInternalInstance,
     computed,
@@ -92,6 +92,8 @@
 
   interface Expose {
     validate: () => Promise<boolean>;
+    clearValidate: () => void;
+    getRowIndex: () => number;
   }
 
   const hasOwn = (obj: Record<string, any>, key: string) => Object.prototype.hasOwnProperty.call(obj, key);
@@ -111,6 +113,7 @@
     registerRules: (params: IRule[]) => void;
     validate: (trigger?: string) => Promise<boolean>;
     clearValidate: () => void;
+    getRowIndex: () => number;
   }> = Symbol('EditableTableColumnKey');
 </script>
 <script setup lang="ts">
@@ -156,7 +159,7 @@
           });
         },
         message: `${label}查询中`,
-        trigger: 'change',
+        trigger: '',
       });
     }
     if (props.required) {
@@ -209,10 +212,10 @@
     const formatConfigRules = configRules.reduce<IFinalRule[]>((result, rule) => {
       let rulevalidator: any;
       if (rule.required) {
-        rulevalidator = isFunction(rule.validator) ? rule.validator : defaultValidator.required;
+        rulevalidator = _.isFunction(rule.validator) ? rule.validator : defaultValidator.required;
         customRequired = true;
       } else if (rule.email) {
-        rulevalidator = isFunction(rule.validator) ? rule.validator : defaultValidator.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);
@@ -222,7 +225,7 @@
         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)) {
+      } else if (_.isFunction(rule.validator)) {
         rulevalidator = rule.validator;
       } else {
         // 不支持的配置规则
@@ -295,11 +298,17 @@
     return result ? '无法操作' : '';
   });
 
-  const validate = (trigger?: string): Promise<boolean> => {
-    // 重新触发验证重置上次的验证状态
+  const getRowIndex = () => tableContext!.getColumnRelateRowIndexByInstance(currentInstance);
+  const clearValidate = () => {
     validateState.isError = false;
     validateState.errorMessage = '';
+  };
+
+  const triggerChangeQueue: string[] = [];
+  const triggerBlurQueue: string[] = [];
+  const triggerQueue: undefined[] = [];
 
+  const validate = (trigger?: string): Promise<boolean> => {
     if (!tableContext) {
       return Promise.resolve(false);
     }
@@ -333,11 +342,13 @@
     // 合并规则属性配置
     const finalRuleList = getTriggerRules(mergeRules(rules, getRulesFromProps(props)), trigger);
 
-    if (finalRuleList.length < 1) {
-      return Promise.resolve(true);
-    }
+    // if (finalRuleList.length < 1) {
+    //   // 重新触发验证重置上次的验证状态
+    //   validateState.isError = false;
+    //   validateState.errorMessage = '';
+    // }
 
-    const value = get(tableContext.props.model[rowContext!.getRowIndex()], props.field);
+    const value = _.get(tableContext.props.model[rowContext!.getRowIndex()], props.field);
 
     const doValidate = (() => {
       let stepIndex = -1;
@@ -379,7 +390,39 @@
         });
       };
     })();
-    return doValidate();
+
+    if (trigger !== undefined) {
+      if (trigger === 'change') {
+        triggerChangeQueue.push(trigger);
+      } else if (trigger === 'blur') {
+        triggerBlurQueue.push(trigger);
+      }
+    } else {
+      triggerQueue.push(trigger);
+    }
+
+    return new Promise((resolve, reject) => {
+      const delay = Math.max(Number(tableContext.props.validateDelay || 200), 0);
+      setTimeout(() => {
+        if (trigger === undefined) {
+          if (triggerQueue.length > 1) {
+            triggerQueue.pop();
+            return reject(false);
+          }
+        }
+        // 处理 change 和 blur 触发器
+        if (trigger === 'change' || trigger === 'blur') {
+          const latestQueue = trigger === 'change' ? triggerChangeQueue : triggerBlurQueue;
+          if (triggerQueue.length > 0 || latestQueue.length > 1) {
+            latestQueue.pop();
+            return resolve(true);
+          }
+          latestQueue.pop();
+        }
+        triggerQueue.pop();
+        return resolve(doValidate());
+      }, delay);
+    });
   };
 
   provide(EditableTableColumnKey, {
@@ -393,10 +436,8 @@
       registerRules = rules;
     },
     validate,
-    clearValidate: () => {
-      validateState.isError = false;
-      validateState.errorMessage = '';
-    },
+    clearValidate,
+    getRowIndex,
   });
 
   onMounted(() => {
@@ -439,13 +480,20 @@
 
   defineExpose<Expose>({
     validate,
+    clearValidate,
+    getRowIndex,
   });
 </script>
 <style lang="less">
+  @focus-z-index: 102;
+  @fixed-focus-z-index: 122;
+  @error-z-index: 101;
+  @fixed-error-z-index: 121;
+
   .bk-editable-table {
     td.bk-editable-table-body-column {
       &.is-focused {
-        z-index: 99;
+        z-index: @focus-z-index;
 
         &::before {
           border-color: #3a84ff;
@@ -465,7 +513,7 @@
       }
 
       &.is-error {
-        z-index: 99;
+        z-index: @error-z-index;
         background: #fff1f1;
 
         &::before {
@@ -473,6 +521,7 @@
         }
 
         .bk-editable-table-field-cell {
+          padding-right: 20px;
           background: #fff1f1;
         }
       }
@@ -482,6 +531,17 @@
           left: -1px;
         }
       }
+
+      &.is-column-fixed-left,
+      &.is-column-fixed-right {
+        &.is-focused {
+          z-index: @fixed-focus-z-index;
+        }
+
+        &.is-error {
+          z-index: @fixed-error-z-index;
+        }
+      }
     }
   }
 
@@ -500,7 +560,7 @@
     z-index: 9;
     display: flex;
     height: 40px;
-    padding: 0 8px;
+    padding-right: 8px;
     color: #ea3636;
     align-items: center;
     transform: translateY(-50%);
diff --git a/dbm-ui/frontend/src/components/editable-table/Index.vue b/dbm-ui/frontend/src/components/editable-table/Index.vue
index 959d60c138..72ad84cfbe 100644
--- a/dbm-ui/frontend/src/components/editable-table/Index.vue
+++ b/dbm-ui/frontend/src/components/editable-table/Index.vue
@@ -70,6 +70,7 @@
   interface Props {
     model: Record<string, any>[];
     rules?: Record<string, IRule[]>;
+    validateDelay?: number;
   }
 
   interface Emits {
@@ -123,10 +124,6 @@
   const { handleMouseDown, handleMouseMove, columnSizeConfig } = useResize(tableRef, resizePlaceholderRef, columnList);
   const { leftFixedStyles, rightFixedStyles, initalScroll } = useScroll(tableRef);
 
-  watch(columnList, () => {
-    initalScroll();
-  });
-
   watch(
     columnSizeConfig,
     () => {
@@ -141,6 +138,7 @@
         setTimeout(() => {
           isShowScrollX.value = scrollXRef.value!.offsetWidth + 2 < scrollXRef.value!.scrollWidth;
         });
+        initalScroll();
       });
     },
     {
@@ -242,6 +240,10 @@
   });
 </script>
 <style lang="less">
+  @fixed-column-z-index: 111;
+  @scroll-z-index: 200;
+  @fixed-wrapper-z-index: 300;
+
   .bk-editable-table {
     position: relative;
     background: #fff;
@@ -307,14 +309,11 @@
       &.is-column-fixed-left {
         position: sticky;
         left: 0;
-        z-index: 9;
-        background: #fff;
       }
 
       &.is-column-fixed-right {
         position: sticky;
         right: 0;
-        background: #fff;
       }
     }
 
@@ -325,6 +324,7 @@
 
       &.is-column-fixed-left,
       &.is-column-fixed-right {
+        z-index: 9;
         background-color: #fafbfd;
       }
 
@@ -338,6 +338,7 @@
 
       &.is-column-fixed-left,
       &.is-column-fixed-right {
+        z-index: @fixed-column-z-index;
         background: #fff;
       }
     }
@@ -361,6 +362,7 @@
     top: 0;
     bottom: 0;
     left: 0;
+    z-index: @fixed-wrapper-z-index;
     overflow-x: hidden;
     pointer-events: none;
     box-shadow: 8px 0 10px -5px rgb(0 0 0 / 12%);
@@ -371,8 +373,9 @@
     top: 0;
     right: 0;
     bottom: 0;
+    z-index: @fixed-wrapper-z-index;
     pointer-events: none;
-    box-shadow: 8px 0 10px -5px rgb(0 0 0 / 12%);
+    box-shadow: -8px 0 10px -5px rgb(0 0 0 / 12%);
   }
 
   .bk-editable-column-resize {
@@ -389,7 +392,7 @@
     right: 1px;
     bottom: 0;
     left: 1px;
-    z-index: 99999999;
+    z-index: @scroll-z-index;
     height: 14px;
     overflow: scroll hidden;
     cursor: pointer;
diff --git a/dbm-ui/frontend/src/components/editable-table/Row.vue b/dbm-ui/frontend/src/components/editable-table/Row.vue
index 5ff1f1c72b..ae88ef871e 100644
--- a/dbm-ui/frontend/src/components/editable-table/Row.vue
+++ b/dbm-ui/frontend/src/components/editable-table/Row.vue
@@ -5,7 +5,7 @@
 </template>
 <script lang="ts">
   import _ from 'lodash';
-  import { inject, type InjectionKey, onBeforeMount, onMounted, provide } from 'vue';
+  import { inject, type InjectionKey, onBeforeUnmount, onMounted, provide } from 'vue';
 
   import type { IContext as IColumnContext } from './Column.vue';
   import { tableInjectKey } from './Index.vue';
@@ -61,7 +61,7 @@
     tableContext?.registerRow(columnList);
   });
 
-  onBeforeMount(() => {
+  onBeforeUnmount(() => {
     tableContext?.unregisterRow(columnList);
   });
 </script>
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 a54a6b1474..902f6134b8 100644
--- a/dbm-ui/frontend/src/components/editable-table/edit/Input.vue
+++ b/dbm-ui/frontend/src/components/editable-table/edit/Input.vue
@@ -5,6 +5,7 @@
     v-bind="{ ...attrs, ...props }"
     clearable
     @blur="handleBlur"
+    @change="handleChange"
     @focus="handleFocus" />
 </template>
 <script setup lang="ts">
@@ -24,6 +25,7 @@
   interface Emits {
     (e: 'blur'): void;
     (e: 'focus'): void;
+    (e: 'change', params: string): void;
   }
 
   const props = defineProps<Props>();
@@ -37,14 +39,15 @@
 
   watch(modelValue, () => {
     columnContext?.validate('change');
-    console.log('change');
   });
 
+  const handleChange = (value: string) => {
+    emits('change', value);
+  };
   const handleBlur = () => {
     columnContext?.blur();
     columnContext?.validate('blur');
     emits('blur');
-    console.log('handleBlur');
   };
 
   const handleFocus = () => {
@@ -58,10 +61,14 @@
       height: 40px;
       border: none;
       box-shadow: none !important;
-    }
 
-    .bk-input--text {
-      background: transparent;
+      .bk-input--text {
+        background: transparent;
+      }
+
+      .bk-input--suffix-icon {
+        background: transparent;
+      }
     }
   }
 </style>
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
index c9030713a2..a109c0d370 100644
--- a/dbm-ui/frontend/src/components/editable-table/hooks/use-scroll.ts
+++ b/dbm-ui/frontend/src/components/editable-table/hooks/use-scroll.ts
@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import { onBeforeUnmount, onMounted, type Ref, shallowRef } from 'vue';
 
 export default function (tableContentRef: Ref<HTMLElement | undefined>) {
@@ -8,7 +7,7 @@ export default function (tableContentRef: Ref<HTMLElement | undefined>) {
   const handleHorizontalScroll = _.throttle(() => {
     const tableEl = tableContentRef.value as HTMLElement;
     const { scrollLeft } = tableEl;
-    const tableContentWidth = tableEl.getBoundingClientRect().width;
+    const tableWrapperWidth = tableEl.getBoundingClientRect().width;
     const tableWidth = tableEl.querySelector('table')!.getBoundingClientRect().width;
     if (scrollLeft === 0) {
       leftFixedStyles.value = {
@@ -24,8 +23,7 @@ export default function (tableContentRef: Ref<HTMLElement | undefined>) {
         width: `${fixedWidth}px`,
       };
     }
-
-    if (tableContentWidth + scrollLeft >= tableWidth) {
+    if (tableWrapperWidth + scrollLeft >= tableWidth) {
       rightFixedStyles.value = {
         display: 'none',
       };
diff --git a/dbm-ui/frontend/src/components/editable-table/types.ts b/dbm-ui/frontend/src/components/editable-table/types.ts
index 34b65a81f3..627b8f6f9d 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: 'change' | 'blur';
+  trigger: string;
 }
diff --git a/dbm-ui/frontend/src/demo/Index.vue b/dbm-ui/frontend/src/demo/Index.vue
index 1d6efb0628..6b949ac739 100644
--- a/dbm-ui/frontend/src/demo/Index.vue
+++ b/dbm-ui/frontend/src/demo/Index.vue
@@ -10,18 +10,18 @@
         field="name"
         fixed="left"
         label="第一列"
-        :min-width="300"
-        :rowspan="5">
+        :loading="isLoading"
+        :min-width="300">
         <EditInput
           v-model="item.name"
           clearable
+          @change="handelNameChange"
           @clear="handleClear" />
       </EditableTableColumn>
       <EditableTableColumn
         field="age"
         label="第二列"
-        :min-width="300"
-        required>
+        :min-width="300">
         <EditSelect v-model="item.age">
           <BkOption
             id="1"
@@ -34,8 +34,7 @@
       <EditableTableColumn
         field="date"
         label="第三列"
-        :min-width="300"
-        required>
+        :min-width="300">
         <EditDatePicker
           v-model="item.date"
           @change="handleChange" />
@@ -69,6 +68,9 @@
         :min-width="300">
         <EditTextarea v-model="item.more" />
       </EditableTableColumn>
+      <OperationColumn
+        :create-row-method="createData"
+        :table-data="dataModel" />
     </EditableTableRow>
   </EditableTable>
   <BkButton
@@ -92,6 +94,8 @@
     TimePicker as EditTimePicker,
   } from '@components/editable-table/Index.vue';
 
+  import OperationColumn from '@views/db-manage/common/toolbox-field/operation-column/Index.vue';
+
   const createData = () => ({
     name: 'name',
     age: '',
@@ -104,11 +108,8 @@
 
   const tableRef = useTemplateRef('table');
   const isSubmiting = ref(false);
-  const isLoading = ref(true);
-
-  setTimeout(() => {
-    isLoading.value = false;
-  }, 10000);
+  const isLoading = ref(false);
+  let data = 0;
 
   const dataModel = reactive([
     createData(),
@@ -130,7 +131,17 @@
     name: [
       {
         validator: (value: string) => {
-          console.log('name = ', value);
+          data += 1;
+          console.log('change validator name = ', value, data);
+          return Boolean(value);
+        },
+        message: '错了',
+        trigger: 'change',
+      },
+      {
+        validator: (value: string) => {
+          data += 2;
+          console.log('blur validator name = ', value, data);
           return Boolean(value);
         },
         message: '错了',
@@ -139,10 +150,7 @@
     ],
     age: [
       {
-        validator: (value: string) => {
-          console.log('validator', value);
-          return true;
-        },
+        validator: () => false,
         message: '错了没',
         trigger: 'change',
       },
@@ -153,6 +161,14 @@
     console.log('handleClear');
   };
 
+  const handelNameChange = () => {
+    isLoading.value = true;
+    console.log('handelNameChange');
+    setTimeout(() => {
+      isLoading.value = false;
+      data += 1000;
+    }, 0);
+  };
   const handleChange = (value: string) => {
     console.log(value);
   };
@@ -160,7 +176,7 @@
   const handleSubmit = () => {
     isSubmiting.value = true;
     tableRef
-      .value!.validate()
+      .value!.validateByColumnIndex(0)
       .then(() => {
         console.log('success');
       })
diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/edit-cluster/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/edit-cluster/Index.vue
deleted file mode 100644
index 09a5ac894a..0000000000
--- a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/edit-cluster/Index.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <div></div>
-</template>
-<script setup lang="ts"></script>
-<style lang="less">
-  .root {
-    display: block;
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/edit-table-name/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/edit-table-name/Index.vue
deleted file mode 100644
index 09a5ac894a..0000000000
--- a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/edit-table-name/Index.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <div></div>
-</template>
-<script setup lang="ts"></script>
-<style lang="less">
-  .root {
-    display: block;
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/operation-column/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/operation-column/Index.vue
new file mode 100644
index 0000000000..1f5da372e4
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/operation-column/Index.vue
@@ -0,0 +1,118 @@
+<!--
+ * 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>
+  <Column
+    ref="column"
+    fixed="right"
+    :label="t('操作')"
+    :max-width="100"
+    :min-width="100">
+    <div class="toolbox-operation-column">
+      <div
+        v-if="Boolean(createRowMethod)"
+        class="action-btn"
+        @click="handleAppend">
+        <DbIcon type="plus-fill" />
+      </div>
+      <div
+        class="action-btn"
+        :class="{
+          disabled: !isRemoveable,
+        }"
+        @click="handleRemove">
+        <DbIcon type="minus-fill" />
+      </div>
+      <div
+        v-bk-tooltips="t('克隆')"
+        class="action-btn"
+        @click="handleClone">
+        <DbIcon type="copy-2" />
+      </div>
+    </div>
+  </Column>
+</template>
+<script setup lang="ts" generic="T extends Record<string, any>">
+  import _ from 'lodash';
+  import { useTemplateRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import { Column } from '@components/editable-table/Index.vue';
+
+  const props = defineProps<{
+    createRowMethod: () => T;
+  }>();
+
+  const tableData = defineModel<T[]>('tableData', {
+    required: true,
+  });
+
+  const { t } = useI18n();
+
+  const columnRef = useTemplateRef('column');
+  const isRemoveable = computed(() => tableData.value.length > 1);
+
+  const handleAppend = () => {
+    const rowIndex = columnRef.value!.getRowIndex();
+    if (rowIndex > -1) {
+      tableData.value.splice(rowIndex, 0, props.createRowMethod());
+    }
+  };
+
+  const handleRemove = () => {
+    if (!isRemoveable.value) {
+      return;
+    }
+    const rowIndex = columnRef.value!.getRowIndex();
+    if (rowIndex > -1) {
+      tableData.value.splice(rowIndex, 1);
+    }
+  };
+
+  const handleClone = () => {
+    const rowIndex = columnRef.value!.getRowIndex();
+
+    if (rowIndex > -1) {
+      tableData.value.splice(rowIndex, 0, _.cloneDeep(tableData.value[rowIndex]));
+    }
+  };
+</script>
+<style lang="less">
+  .toolbox-operation-column {
+    display: flex;
+    height: 42px;
+    padding: 0 10px;
+    align-items: center;
+
+    .action-btn {
+      display: flex;
+      font-size: 14px;
+      color: #c4c6cc;
+      cursor: pointer;
+      transition: all 0.15s;
+
+      &:hover {
+        color: #979ba5;
+      }
+
+      &.disabled {
+        color: #dcdee5;
+        cursor: not-allowed;
+      }
+
+      & ~ .action-btn {
+        margin-left: 12px;
+      }
+    }
+  }
+</style>