diff --git a/src/components/advanced/table-header-operation.vue b/src/components/advanced/table-header-operation.vue
index e76af078..f773e8f0 100644
--- a/src/components/advanced/table-header-operation.vue
+++ b/src/components/advanced/table-header-operation.vue
@@ -6,6 +6,7 @@ defineOptions({
 });
 
 interface Props {
+  itemAlign?: 'stretch' | 'baseline' | 'start' | 'end' | 'center' | 'flex-end' | 'flex-start';
   disabledDelete?: boolean;
   loading?: boolean;
 }
@@ -38,24 +39,27 @@ function refresh() {
 </script>
 
 <template>
-  <NSpace wrap justify="end" class="<sm:w-200px">
-    <NButton size="small" ghost type="primary" @click="add">
-      <template #icon>
-        <icon-ic-round-plus class="text-icon" />
-      </template>
-      {{ $t('common.add') }}
-    </NButton>
-    <NPopconfirm @positive-click="batchDelete">
-      <template #trigger>
-        <NButton size="small" ghost type="error" :disabled="disabledDelete">
-          <template #icon>
-            <icon-ic-round-delete class="text-icon" />
-          </template>
-          {{ $t('common.batchDelete') }}
-        </NButton>
-      </template>
-      {{ $t('common.confirmDelete') }}
-    </NPopconfirm>
+  <NSpace :align="itemAlign" wrap justify="end" class="<sm:w-200px">
+    <slot name="prefix"></slot>
+    <slot name="default">
+      <NButton size="small" ghost type="primary" @click="add">
+        <template #icon>
+          <icon-ic-round-plus class="text-icon" />
+        </template>
+        {{ $t('common.add') }}
+      </NButton>
+      <NPopconfirm @positive-click="batchDelete">
+        <template #trigger>
+          <NButton size="small" ghost type="error" :disabled="disabledDelete">
+            <template #icon>
+              <icon-ic-round-delete class="text-icon" />
+            </template>
+            {{ $t('common.batchDelete') }}
+          </NButton>
+        </template>
+        {{ $t('common.confirmDelete') }}
+      </NPopconfirm>
+    </slot>
     <NButton size="small" @click="refresh">
       <template #icon>
         <icon-mdi-refresh class="text-icon" :class="{ 'animate-spin': loading }" />
@@ -63,6 +67,7 @@ function refresh() {
       {{ $t('common.refresh') }}
     </NButton>
     <TableColumnSetting v-model:columns="columns" />
+    <slot name="suffix"></slot>
   </NSpace>
 </template>