diff --git a/.vscode/opendesign.token.code-snippets b/.vscode/opendesign.token.code-snippets
index f46c4e849c0a385eafa125d6097e284299437c45..e4222b68a6d645e1c1d137c10a11e8f2fe2fdcff 100644
--- a/.vscode/opendesign.token.code-snippets
+++ b/.vscode/opendesign.token.code-snippets
@@ -295,6 +295,14 @@
     "description": "遮罩色1: 用于弹窗遮罩色[light: rgba(0, 0, 0, 0.5), 'dark: rgba(0, 0, 0, 0.5)]",
     "scope": "css,scss,less"
   },
+  "--o-color-mask2": {
+    "prefix": [
+      "--o-color-mask2"
+    ],
+    "body": "var(--o-color-mask2)",
+    "description": "遮罩色2: 用于loading遮罩色[light: rgba(0, 0, 0, 0.1), 'dark: rgba(0, 0, 0, 0.1)]",
+    "scope": "css,scss,less"
+  },
   "--o-shadow-1": {
     "prefix": [
       "--o-shadow-1"
diff --git a/packages/docs/global.md b/packages/docs/global.md
index aa5ad896c75538fce733deb02d0c0ca6d414737f..aaf6bca07bb5f9b12042d24b87ac68673baa4478 100644
--- a/packages/docs/global.md
+++ b/packages/docs/global.md
@@ -16,3 +16,10 @@
 | initLinkPrefixIcon | (icon: Component) | --     | 设置 link 组件前缀图标 |
 | initCloseIcon      | (icon: Component) | --     | 设置全局关闭图标       |
 | initAddIcon        | (icon: Component) | --     | 设置全局添加图标       |
+
+| 方法名  | 参数                                    | 默认值    |
+| :------ | :-------------------------------------- | :-------- |
+| color   | undefined primary success warning error | undefined |
+| variant | fill outline text                       | outline   |
+| rounded | undefined string 'pill'                 | undefined |
+| size    | small medium large                      | medium    |
diff --git a/packages/opendesign/src/components/pagination/OPagination.vue b/packages/opendesign/src/components/pagination/OPagination.vue
index 6d626850de9280e0e268c8fc35a19ea248ef8234..ab015c021d4ad91dca84f1ac58eb183efa19b16d 100644
--- a/packages/opendesign/src/components/pagination/OPagination.vue
+++ b/packages/opendesign/src/components/pagination/OPagination.vue
@@ -1,48 +1,18 @@
 <script setup lang="ts">
-import { computed, ref, nextTick, watch } from 'vue';
+import { computed, ref, nextTick, watch, Ref } from 'vue';
 import { getPagerItem, PagerItemT, getSizeOptions } from './pagination';
 import { OPopover } from '../popover';
 import { OInputNumber } from '../input-number';
 import { OSelect } from '../select';
 import { OOption } from '../option';
+import { paginationProps } from './types';
+
+const props = defineProps(paginationProps);
 
-interface PaginationPropT {
-  /**
-   * 支持选择的每页数据条数
-   */
-  pageSizes?: number[];
-  /**
-   * 每页数据条数
-   */
-  pageSize?: number;
-  /**
-   * 数据总条数
-   */
-  total: number;
-  /**
-   * 当前页码
-   */
-  currentPage?: number;
-  /**
-   * 显示页面数 > 3
-   */
-  showPageCount?: number;
-  /**
-   * 简洁模式
-   */
-  simple?: boolean;
-}
-
-const props = withDefaults(defineProps<PaginationPropT>(), {
-  pageSizes: () => [6, 12, 24, 48],
-  pageSize: 6,
-  currentPage: 1,
-  showPageCount: 9,
-});
 const emits = defineEmits<{
   (e: 'update:pageSize', value: number): void;
-  (e: 'update:currentPage', value: number): void;
-  (e: 'change', value: { current: number; size: number }): void;
+  (e: 'update:page', value: number): void;
+  (e: 'change', value: { page: number; pageSize: number }): void;
 }>();
 
 const Labels = {
@@ -53,7 +23,7 @@ const Labels = {
 };
 
 let currentPageSize = ref(props.pageSize || props.pageSizes[0]);
-let currentPage = ref(props.currentPage);
+let currentPage = ref(props.page);
 
 const pageSizeList = getSizeOptions(props.pageSizes, Labels.sizeLabel, currentPageSize.value);
 const defaultSizeLabel = currentPageSize.value + Labels.sizeLabel;
@@ -81,10 +51,10 @@ const updateCurrentPage = (page: number) => {
     currentPage.value = page;
   }
 
-  emits('update:currentPage', currentPage.value);
+  emits('update:page', currentPage.value);
   emits('change', {
-    current: currentPage.value,
-    size: currentPageSize.value,
+    page: currentPage.value,
+    pageSize: currentPageSize.value,
   });
   pages.value = getPagerItem(totalPage.value, currentPage.value, props.showPageCount);
 };
@@ -112,20 +82,38 @@ const goToChange = (val: string | number) => {
 
 const pageSizeChange = (val: string | number) => {
   // updateCurrentPage(Number(val));
-  const currentIndex = currentPageSize.value * currentPage.value;
+  const currentIndex = currentPageSize.value * (currentPage.value - 1);
+  const oldPage = currentPage.value;
   currentPageSize.value = Number(val);
   nextTick(() => {
-    currentPage.value = Math.ceil(currentIndex / currentPageSize.value);
+    currentPage.value = Math.floor(currentIndex / currentPageSize.value) + 1;
     console.log(currentIndex, totalPage.value, currentPage.value, currentPageSize.value);
 
     pages.value = getPagerItem(totalPage.value, currentPage.value, props.showPageCount);
+
+    if (oldPage !== currentPage.value) {
+      emits('update:page', currentPage.value);
+    }
+    emits('update:pageSize', currentPageSize.value);
+    emits('change', {
+      page: currentPage.value,
+      pageSize: currentPageSize.value,
+    });
   });
 };
+
+defineExpose<{
+  pageCount: Ref<number>;
+}>({
+  pageCount: totalPage,
+});
 </script>
 <template>
   <div class="o-pagination">
     <div class="o-pagination-wrap">
+      <!-- total -->
       <div class="o-pagination-total">{{ Labels.total }}&nbsp;{{ props.total }}</div>
+      <!-- sizes -->
       <template v-if="!props.simple">
         <div class="o-pagination-size">
           <OSelect :model-value="currentPageSize" class="o-pagination-select" :default-label="defaultSizeLabel" @change="pageSizeChange">
@@ -133,6 +121,7 @@ const pageSizeChange = (val: string | number) => {
           </OSelect>
         </div>
       </template>
+      <!-- pager -->
       <div class="o-pagination-pager">
         <div class="o-pagination-prev" :class="{ disabled: currentPage === 1 }" @click="() => currentPage !== 1 && clickPageBtn(false)">&lt;</div>
         <div class="o-pagination-pages">
@@ -175,7 +164,8 @@ const pageSizeChange = (val: string | number) => {
           &gt;
         </div>
       </div>
-      <template v-if="!props.simple">
+      <!-- jumper -->
+      <template v-if="props.showJumper && !props.simple">
         <div class="o-pagination-goto">
           {{ Labels.goto }}&nbsp;<OInputNumber
             :model-value="currentPage"
diff --git a/packages/opendesign/src/components/pagination/__demo__/PaginationBasic.vue b/packages/opendesign/src/components/pagination/__demo__/PaginationBasic.vue
index 74086d10c17af186d4e9bf834e03be14aa072876..b5acdfb9f353c73e45523bb32311a72ffe90db77 100644
--- a/packages/opendesign/src/components/pagination/__demo__/PaginationBasic.vue
+++ b/packages/opendesign/src/components/pagination/__demo__/PaginationBasic.vue
@@ -10,19 +10,24 @@ setTimeout(() => {
 
 const pageSize = 8;
 const pageSizes = [8, 16, 32, 64];
-const onChange = (value: { current: number; size: number }) => {
+const onChange = (value: { page: number; pageSize: number }) => {
   console.log(value);
 };
 </script>
 <template>
   <h4>Basic</h4>
   <div class="sec">
-    <OPagination :total="total" :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" @change="onChange" />
+    <OPagination :total="total" :page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" @change="onChange" />
   </div>
   <h4>Simple</h4>
   <div class="sec">
     <div>当前页：{{ currentPage }}</div>
-    <OPagination v-model:current-page="currentPage" :total="100" simple @change="onChange" />
+    <OPagination v-model:page="currentPage" :total="100" simple @change="onChange" />
+  </div>
+  <h4>显示跳转</h4>
+  <div class="sec">
+    <div>当前页：{{ currentPage }}</div>
+    <OPagination v-model:page="currentPage" :total="100" :show-jumper="true" @change="onChange" />
   </div>
 </template>
 <style lang="scss">
diff --git a/packages/opendesign/src/components/pagination/index.ts b/packages/opendesign/src/components/pagination/index.ts
index 09fbd47dd003089d157fe1cf0719a67c1673834d..a07fbd34ff5e2a86f6098bd21778a60a7f375aa5 100644
--- a/packages/opendesign/src/components/pagination/index.ts
+++ b/packages/opendesign/src/components/pagination/index.ts
@@ -8,3 +8,4 @@ const OPagination = Object.assign(_OPagination, {
 });
 
 export { OPagination };
+export * from './types';
diff --git a/packages/opendesign/src/components/pagination/style/index.scss b/packages/opendesign/src/components/pagination/style/index.scss
index 60a5816496be3ce6e76e9346accc6cd22d8cb8de..dbfdfc88c435bcf4b9e1fa9300f0fd4dc0ba3696 100644
--- a/packages/opendesign/src/components/pagination/style/index.scss
+++ b/packages/opendesign/src/components/pagination/style/index.scss
@@ -72,9 +72,14 @@
   width: 60px;
 }
 
-.o-pagination-simple {
-}
-
 .o-pagination-select {
   width: 110px;
 }
+
+.o-pagination {
+  .o-table + & {
+    margin-top: 12px;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
diff --git a/packages/opendesign/src/components/pagination/types.ts b/packages/opendesign/src/components/pagination/types.ts
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..8d7f5f185b7427c2493c49f920972fa810bdbf87 100644
--- a/packages/opendesign/src/components/pagination/types.ts
+++ b/packages/opendesign/src/components/pagination/types.ts
@@ -0,0 +1,55 @@
+import { ExtractPropTypes, PropType } from 'vue';
+
+const pageSizes = [6, 12, 24, 48];
+
+export const paginationProps = {
+  /**
+   * 支持选择的每页数据条数
+   */
+  pageSizes: {
+    type: Array as PropType<number[]>,
+    default: () => pageSizes
+  },
+  /**
+   * 每页数据条数
+   */
+  pageSize: {
+    type: Number,
+    default: pageSizes[0]
+  },
+  /**
+   * 数据总条数
+   */
+  total: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * 当前页码
+   */
+  page: {
+    type: Number,
+    default: 1
+  },
+  /**
+   * 显示页面数 > 3
+   */
+  showPageCount: {
+    type: Number,
+    default: 9
+  },
+  /**
+   * 显示页面数 > 3
+   */
+  showJumper: {
+    type: Boolean
+  },
+  /**
+   * 简洁模式
+   */
+  simple: {
+    type: Boolean
+  },
+};
+
+export type PaginationPropsT = ExtractPropTypes<typeof paginationProps>;
\ No newline at end of file
diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index fdee19f2dff62cd8f6bf1b840d14266a283abe18..17fcb0b23effcce9e9b7530212bd4e29b8f53151 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -5,7 +5,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { onMounted, reactive, ref, Ref, watch, nextTick, onUnmounted, PropType, ComponentPublicInstance, computed } from 'vue';
-import { PopupPositionT, PopupTriggerT } from './types';
+import { propupProps } from './types';
 import { isElement, getScrollParents } from '../_shared/dom';
 import { throttleRAF } from '../_shared/utils';
 import { isArray } from '../_shared/is';
@@ -18,114 +18,7 @@ import { OChildOnly } from '../child-only';
 
 // TODO 处理嵌套
 
-const props = defineProps({
-  /**
-   * 弹出位置
-   */
-  position: {
-    type: String as PropType<PopupPositionT>,
-    default: 'top',
-  },
-  /**
-   * 触发事件
-   * 'hover','click','focus','contextMenu'
-   */
-  trigger: {
-    type: [String, Array<String>] as PropType<PopupTriggerT | PopupTriggerT[]>,
-    default: 'hover',
-  },
-  /**
-   * 触发元素或组件
-   */
-  target: {
-    type: [String, Object] as PropType<string | ComponentPublicInstance | HTMLElement | null>,
-    default: null,
-  },
-  /**
-   * 是否可见
-   * v-model
-   */
-  visible: {
-    type: Boolean,
-  },
-  /**
-   * 挂载容器，默认为body
-   */
-  wrapper: {
-    type: [String, Object] as PropType<string | HTMLElement>,
-    default: document.body,
-  },
-  /**
-   * 距离target偏移量
-   */
-  offset: {
-    type: Number,
-    default: 0,
-  },
-  /**
-   * hover事件延时触发的时间（毫秒）
-   */
-  hoverDelay: {
-    type: Number,
-    default: 100,
-  },
-  /**
-   * 是否当触发元素不可见时隐藏弹层
-   */
-  hideWhenTargetInvisible: {
-    type: Boolean,
-    default: true,
-  },
-  /**
-   * 锚点自定义class
-   */
-  anchorClass: {
-    type: String,
-    default: '',
-  },
-  /**
-   * 是否在popup隐藏时unmout
-   */
-  unmountOnHide: {
-    type: Boolean,
-    default: true,
-  },
-  /**
-   * Popup在hover时是否不消失，当trigger包含hover时有效
-   */
-  statyOnHoverin: {
-    type: Boolean,
-    default: true,
-  },
-  /**
-   * popup wrap自定义class
-   */
-  wrapClass: {
-    type: String,
-    default: '',
-  },
-  /**
-   * popup最小宽度设置为触发元素宽度
-   */
-  adjustMinWidth: {
-    type: Boolean,
-    default: true,
-  },
-  /**
-   * popup宽度设置为触发元素宽度
-   */
-  adjustWidth: {
-    type: Boolean,
-    default: true,
-  },
-  /**
-   * 过渡名称
-   */
-  transition: {
-    type: String,
-    default: 'o-zoom-fade',
-  },
-});
+const props = defineProps(propupProps);
 
 const emits = defineEmits<{ (e: 'update:visible', val: boolean): void; (e: 'change', val: boolean): void }>();
 const triggers = isArray(props.trigger) ? props.trigger : [props.trigger];
diff --git a/packages/opendesign/src/components/popup/types.ts b/packages/opendesign/src/components/popup/types.ts
index 9a241c114a70191117892c3a7893c7465e1141d7..38e11f56bc77343efcf09b43b85a739b2be6aebb 100644
--- a/packages/opendesign/src/components/popup/types.ts
+++ b/packages/opendesign/src/components/popup/types.ts
@@ -1,3 +1,116 @@
+import { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue';
+
 export type PopupPositionT = 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';
 
-export type PopupTriggerT = 'hover' | 'click' | 'focus' | 'contextmenu' | 'none'
\ No newline at end of file
+export type PopupTriggerT = 'hover' | 'click' | 'focus' | 'contextmenu' | 'none';
+
+export const propupProps = {
+  /**
+   * 弹出位置
+   */
+  position: {
+    type: String as PropType<PopupPositionT>,
+    default: 'top',
+  },
+  /**
+   * 触发事件
+   * 'hover','click','focus','contextMenu'
+   */
+  trigger: {
+    type: [String, Array<String>] as PropType<PopupTriggerT | PopupTriggerT[]>,
+    default: 'hover',
+  },
+  /**
+   * 触发元素或组件
+   */
+  target: {
+    type: [String, Object] as PropType<string | ComponentPublicInstance | HTMLElement | null>,
+    default: null,
+  },
+  /**
+   * 是否可见
+   * v-model
+   */
+  visible: {
+    type: Boolean,
+  },
+  /**
+   * 挂载容器，默认为body
+   */
+  wrapper: {
+    type: [String, Object] as PropType<string | HTMLElement>,
+    default: document.body,
+  },
+  /**
+   * 距离target偏移量
+   */
+  offset: {
+    type: Number,
+    default: 0,
+  },
+  /**
+   * hover事件延时触发的时间（毫秒）
+   */
+  hoverDelay: {
+    type: Number,
+    default: 100,
+  },
+  /**
+   * 是否当触发元素不可见时隐藏弹层
+   */
+  hideWhenTargetInvisible: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 锚点自定义class
+   */
+  anchorClass: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 是否在popup隐藏时unmout
+   */
+  unmountOnHide: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * Popup在hover时是否不消失，当trigger包含hover时有效
+   */
+  statyOnHoverin: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * popup wrap自定义class
+   */
+  wrapClass: {
+    type: String,
+    default: '',
+  },
+  /**
+   * popup最小宽度设置为触发元素宽度
+   */
+  adjustMinWidth: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * popup宽度设置为触发元素宽度
+   */
+  adjustWidth: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 过渡名称
+   */
+  transition: {
+    type: String,
+    default: 'o-zoom-fade',
+  },
+};
+
+export type PopupPropsT = ExtractPropTypes<typeof propupProps>;
\ No newline at end of file
diff --git a/packages/opendesign/src/components/style/default-light.token.css b/packages/opendesign/src/components/style/default-light.token.css
index abb3f6a42e83c8fc8d558bc48ba00698b062a190..0677d8d0f6b491907cc66ab29735325594c514ef 100644
--- a/packages/opendesign/src/components/style/default-light.token.css
+++ b/packages/opendesign/src/components/style/default-light.token.css
@@ -260,6 +260,13 @@
    * @description 用于弹窗遮罩色
    */
   --o-color-mask1: rgba(0, 0, 0, 0.5);
+  /**
+   * @name 遮罩色2
+   * @type color
+   * @group mask
+   * @description 用于loading遮罩色
+   */
+  --o-color-mask2: rgba(0, 0, 0, 0.1);
   /**
    * @name 阴影1
    * @type shadow
diff --git a/packages/opendesign/src/components/table/OTable.vue b/packages/opendesign/src/components/table/OTable.vue
index 59d7f279b42d3dc5b4b0cda8f7077bdabd09e793..ebbacf4be04d57bcf9dfeb831d7f2923ef7e7a0c 100644
--- a/packages/opendesign/src/components/table/OTable.vue
+++ b/packages/opendesign/src/components/table/OTable.vue
@@ -1,59 +1,13 @@
 <script setup lang="ts">
-import { TableColumnT, TableRowT, ColumnKeysT, CellSpanT, TableBorderT } from './types';
+import { tableProps } from './types';
 import { getColumnData, getBodyData } from './table';
 import { computed } from 'vue';
 import { IconLoading } from '../_shared/icons';
 import { isString } from '../_shared/is';
 
-interface TablePropT {
-  /**
-   * 表头内容
-   */
-  columns?: TableColumnT[] | string[];
-  /**
-   * 表头内容
-   */
-  columnKeys?: ColumnKeysT;
-  /**
-   * 表格数据
-   */
-  data?: TableRowT[];
-  /**
-   * 是否显示边框
-   */
-  border?: TableBorderT;
-  /**
-   * 是否小表格
-   */
-  small?: boolean;
-  /**
-   * 处理单元格合并(表体部分，不包含表头)
-   */
-  cellSpan?: CellSpanT;
-  /**
-   * 空数据提示文本
-   */
-  emptyLabel?: string;
-  /**
-   * 是否正在加载
-   */
-  loading?: boolean;
-  /**
-   * 加载提示文本
-   */
-  loadingLabel?: string;
-}
+const props = defineProps(tableProps);
 
-const props = withDefaults(defineProps<TablePropT>(), {
-  small: false,
-  cellSpan: undefined,
-  columns: undefined,
-  columnKeys: undefined,
-  data: undefined,
-  emptyLabel: '',
-  loadingLabel: '',
-  border: 'row',
-});
+const emits = defineEmits<{}>();
 
 const columnData = computed(() => getColumnData(props.columns));
 
@@ -73,41 +27,42 @@ const boderClass = computed(() => {
   <div
     class="o-table"
     :class="[
-      boderClass,
       {
         'is-small': props.small,
       },
     ]"
   >
-    <table>
-      <colgroup>
-        <col v-for="col in columnData" :key="col.key" :style="col.style" />
-      </colgroup>
-      <thead v-if="columnData.length > 1">
-        <slot name="head">
-          <th v-for="(col, idx) in columnData" :key="col.key || idx" :class="{ last: idx + 1 === columnData.length }">{{ col.label }}</th>
-        </slot>
-      </thead>
-      <tbody v-if="!props.loading && tableData.length > 0">
-        <slot>
-          <tr v-for="(row, rIdx) in tableData" :key="row.key || rIdx">
-            <template v-for="(col, cIdx) in row.data" :key="col.key || cIdx">
-              <td :rowspan="col.rowspan" :colspan="col.colspan" :class="{ last: col.last }">{{ col.value }}</td>
-            </template>
-          </tr>
+    <div class="o-table-wrap" :class="boderClass">
+      <table>
+        <colgroup>
+          <col v-for="col in columnData" :key="col.key" :style="col.style" />
+        </colgroup>
+        <thead v-if="columnData.length > 1">
+          <slot name="head">
+            <th v-for="(col, idx) in columnData" :key="col.key || idx" :class="{ last: idx + 1 === columnData.length }">{{ col.label }}</th>
+          </slot>
+        </thead>
+        <tbody v-if="tableData.length > 0">
+          <slot>
+            <tr v-for="(row, rIdx) in tableData" :key="row.key || rIdx">
+              <template v-for="(col, cIdx) in row.data" :key="col.key || cIdx">
+                <td :rowspan="col.rowspan" :colspan="col.colspan" :class="{ last: col.last }">{{ col.value }}</td>
+              </template>
+            </tr>
+          </slot>
+        </tbody>
+      </table>
+      <div v-if="!props.loading && (!props.data || props.data.length === 0)" class="o-table-tip-wrap">
+        <slot name="empty">
+          <div class="o-table-empty-label">{{ emptyLabel }}</div>
         </slot>
-      </tbody>
-    </table>
-    <div v-if="props.loading" class="o-table-tip-wrap">
+      </div>
+    </div>
+    <div v-if="props.loading" class="o-table-loading-wrap">
       <slot name="loading">
         <IconLoading class="o-rotating" />
         <div class="o-table-loading-label">{{ loadingLabel }}</div>
       </slot>
     </div>
-    <div v-else-if="tableData.length === 0" class="o-table-tip-wrap">
-      <slot name="empty">
-        <div class="o-table-empty-label">{{ emptyLabel }}</div>
-      </slot>
-    </div>
   </div>
 </template>
diff --git a/packages/opendesign/src/components/table/__demo__/IndexTable.vue b/packages/opendesign/src/components/table/__demo__/IndexTable.vue
index ae99bd6a1186b4be4ab311e7c2b406ca8d642c50..068d8b5fa796d00d6050fb8410ebb1f971d72b42 100644
--- a/packages/opendesign/src/components/table/__demo__/IndexTable.vue
+++ b/packages/opendesign/src/components/table/__demo__/IndexTable.vue
@@ -1,15 +1,18 @@
 <script setup lang="ts">
 import '../style';
+import '../../pagination/style';
 
 import TableBasic from './TableBasic.vue';
+import TablePagination from './TablePagination.vue';
 import TableSpan from './TableSpan.vue';
 import TableDiyHead from './TableDiyHead.vue';
 </script>
 <template>
   <div class="page-demo">
-    <TableSpan />
-    <TableDiyHead />
     <TableBasic />
+    <TableDiyHead />
+    <TableSpan />
+    <TablePagination />
   </div>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/table/__demo__/TableBasic.vue b/packages/opendesign/src/components/table/__demo__/TableBasic.vue
index 8ed2de5ff56e6e85ba1432d16606f09886c770e8..ae48b371ea95740a72e1d64f0a249476aa1c2dfd 100644
--- a/packages/opendesign/src/components/table/__demo__/TableBasic.vue
+++ b/packages/opendesign/src/components/table/__demo__/TableBasic.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { OTable } from '../index';
+import { getTableData } from './data';
 
 const columns1 = [
   { label: 'Name', key: 'name' },
@@ -10,38 +11,7 @@ const columns1 = [
 ];
 const table1 = {
   columns: columns1,
-  data: [
-    {
-      name: 'Jane Doe',
-      salary: 23000,
-      address: '32 Park Road, London',
-      email: 'jane.doe@example.com',
-    },
-    {
-      name: 'Alisa Ross',
-      salary: 25000,
-      address: '35 Park Road, London',
-      email: 'alisa.ross@example.com',
-    },
-    {
-      name: 'Kevin Sandra',
-      salary: 22000,
-      address: '31 Park Road, London',
-      email: 'kevin.sandra@example.com',
-    },
-    {
-      name: 'Ed Hellen',
-      salary: 17000,
-      address: '42 Park Road, London',
-      email: 'ed.hellen@example.com',
-    },
-    {
-      name: 'William Smith',
-      salary: 27000,
-      address: '62 Park Road, London',
-      email: 'william.smith@example.com',
-    },
-  ],
+  data: getTableData(6),
 };
 const loading = ref(true);
 </script>
@@ -56,6 +26,7 @@ const loading = ref(true);
     <br />
     <OTable :columns="table1.columns" />
   </div>
+
   <h4>Style: Border</h4>
   <div class="sec">
     <h5>Border: all</h5>
diff --git a/packages/opendesign/src/components/table/__demo__/TableDiyHead.vue b/packages/opendesign/src/components/table/__demo__/TableDiyHead.vue
index 44ee002bec7cf7327cade5ba9932c56c42fac7d5..528ead8130f91bd00ba813859a91e1a47706b9f8 100644
--- a/packages/opendesign/src/components/table/__demo__/TableDiyHead.vue
+++ b/packages/opendesign/src/components/table/__demo__/TableDiyHead.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { OTable } from '../index';
+import { getTableData } from './data';
 
 interface ColItemT {
   label: string;
@@ -22,48 +23,7 @@ const columns1: ColItemT[][] = [
 ];
 const columnKeys = ['name', 'salary', 'address', 'email', 'other'];
 
-const tableData = [
-  {
-    key: 1,
-    name: 'Jane Doe',
-    salary: 23000,
-    address: '32 Park Road, London',
-    email: 'jane.doe@example.com',
-    other: 'other',
-  },
-  {
-    key: 2,
-    name: 'Alisa Ross',
-    salary: 25000,
-    address: '35 Park Road, London',
-    email: 'alisa.ross@example.com',
-    other: 'other',
-  },
-  {
-    key: 3,
-    name: 'Kevin Sandra',
-    salary: 22000,
-    address: '31 Park Road, London',
-    email: 'kevin.sandra@example.com',
-    other: 'other',
-  },
-  {
-    key: 4,
-    name: 'Ed Hellen',
-    salary: 17000,
-    address: '42 Park Road, London',
-    email: 'ed.hellen@example.com',
-    other: 'other',
-  },
-  {
-    key: 5,
-    name: 'William Smith',
-    salary: 27000,
-    address: '62 Park Road, London',
-    email: 'william.smith@example.com',
-    other: 'other',
-  },
-];
+const tableData = getTableData(6);
 </script>
 <template>
   <h4>自定义表头</h4>
diff --git a/packages/opendesign/src/components/table/__demo__/TablePagination.vue b/packages/opendesign/src/components/table/__demo__/TablePagination.vue
new file mode 100644
index 0000000000000000000000000000000000000000..76b9f715da71f0dbfd0f8b4f7542df033e0b052f
--- /dev/null
+++ b/packages/opendesign/src/components/table/__demo__/TablePagination.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+import { OTable } from '../index';
+import { OPagination } from '../../pagination';
+import { requestTableData } from './data';
+
+const columns1 = [
+  { label: 'Name', key: 'name' },
+  { label: 'Salary', key: 'salary' },
+  { label: 'Address', key: 'address' },
+  { label: 'Email', key: 'email' },
+];
+
+const loading = ref(true);
+const data: any = ref([]);
+const pagination = reactive({
+  total: 0,
+});
+
+requestTableData(0, 6).then((res) => {
+  data.value = res.list;
+  pagination.total = res.total;
+  loading.value = false;
+});
+
+const onPageChange = ({ page, pageSize }: { page: number; pageSize: number }) => {
+  const idx = (page - 1) * pageSize;
+  loading.value = true;
+
+  requestTableData(idx, pageSize).then((res) => {
+    data.value = res.list;
+    pagination.total = res.total;
+    loading.value = false;
+    console.log(res);
+  });
+};
+</script>
+<template>
+  <h4>Pagination</h4>
+  <div class="sec">
+    <OTable :columns="columns1" :data="data" :loading="loading" :pagination="pagination" @change:page="onPageChange" />
+    <OPagination v-if="pagination.total !== 0" :total="pagination.total" @change="onPageChange" />
+  </div>
+</template>
+<style lang="scss">
+.sec {
+  margin-bottom: 24px;
+}
+</style>
diff --git a/packages/opendesign/src/components/table/__demo__/TableSpan.vue b/packages/opendesign/src/components/table/__demo__/TableSpan.vue
index 3e3a5750b3d47a05f14a0d7ba81b30cf06b1fc3f..2a22c4cb7d6a7b61ae006e876c62bc9826a74ecb 100644
--- a/packages/opendesign/src/components/table/__demo__/TableSpan.vue
+++ b/packages/opendesign/src/components/table/__demo__/TableSpan.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { OTable } from '../index';
+import { getTableData } from './data';
 
 const columns2 = [
   { label: 'No 0', key: 'no' },
@@ -9,53 +10,7 @@ const columns2 = [
   { label: 'Email 4', key: 'email' },
   { label: 'Other 5', key: 'other' },
 ];
-const tableData = [
-  {
-    no: 0,
-    key: 1,
-    name: 'Jane Doe',
-    salary: 23000,
-    address: '32 Park Road, London',
-    email: 'jane.doe@example.com',
-    other: 'other info',
-  },
-  {
-    no: 1,
-    key: 2,
-    name: 'Alisa Ross',
-    salary: 25000,
-    address: '35 Park Road, London',
-    email: 'alisa.ross@example.com',
-    other: 'other info',
-  },
-  {
-    no: 2,
-    key: 3,
-    name: 'Kevin Sandra',
-    salary: 22000,
-    address: '31 Park Road, London',
-    email: 'kevin.sandra@example.com',
-    other: 'other info',
-  },
-  {
-    no: 3,
-    key: 4,
-    name: 'Ed Hellen',
-    salary: 17000,
-    address: '42 Park Road, London',
-    email: 'ed.hellen@example.com',
-    other: 'other info',
-  },
-  {
-    no: 4,
-    key: 5,
-    name: 'William Smith',
-    salary: 27000,
-    address: '62 Park Road, London',
-    email: 'william.smith@example.com',
-    other: 'other info',
-  },
-];
+const tableData = getTableData(6);
 
 function cellSpanFn(rowIdx: number, colIdx: number) {
   if (rowIdx === 2 && colIdx === 2) {
diff --git a/packages/opendesign/src/components/table/__demo__/data.ts b/packages/opendesign/src/components/table/__demo__/data.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c982081dfef115d0f333d9988c0118670c2d4dd2
--- /dev/null
+++ b/packages/opendesign/src/components/table/__demo__/data.ts
@@ -0,0 +1,32 @@
+function getItem(index: number) {
+  return {
+    no: index,
+    key: index,
+    name: `William Smith ${index}`,
+    salary: 27000 + index,
+    address: `${index} Park Road, London`,
+    email: `william.smith${index}@example.com`,
+    other: `other info ${index}`,
+  };
+}
+
+export function getTableData(total: number, idx = 0) {
+  const rlt = [];
+  for (let i = idx; i <= idx + total; i++) {
+    rlt.push(getItem(i + 1));
+  }
+  return rlt;
+}
+
+export function requestTableData(cursor: number, length: number): Promise<{ total: number, list: any[] }> {
+  const total = 100;
+  return new Promise((resolve) => {
+    const list = getTableData(length, cursor);
+    setTimeout(() => {
+      resolve({
+        total,
+        list
+      });
+    }, 1000);
+  });
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/components/table/style/index.scss b/packages/opendesign/src/components/table/style/index.scss
index 07dc5cbe47f7b22f1345b39dc5503ef52ea28c2c..77e658cbd664e4155a0c1bce2b6bb2e425a52f62 100644
--- a/packages/opendesign/src/components/table/style/index.scss
+++ b/packages/opendesign/src/components/table/style/index.scss
@@ -1,6 +1,9 @@
 @use './var.scss';
 
 .o-table {
+  --table-min-height: 240px;
+  position: relative;
+  min-height: var(--table-min-height);
   table {
     width: 100%;
     border-collapse: collapse;
@@ -84,11 +87,25 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 32px;
   border-bottom: var(--table-border);
   font-size: var(--table-tip-text-size);
   line-height: var(--table-tip-text-height);
   color: var(--table-tip-color);
+  min-height: calc(var(--table-min-height) - 48px);
+}
+.o-table-loading-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--table-tip-text-size);
+  line-height: var(--table-tip-text-height);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--table-loading-mask);
+  color: var(--table-loading-color);
 }
 
 .o-table-loading-label {
diff --git a/packages/opendesign/src/components/table/style/index.ts b/packages/opendesign/src/components/table/style/index.ts
index 591b2fbd72dcd5e987362d645b561bd2fac42716..6bc955b97aa166fe766467fdded425b0e4437895 100644
--- a/packages/opendesign/src/components/table/style/index.ts
+++ b/packages/opendesign/src/components/table/style/index.ts
@@ -1,2 +1,3 @@
 import '../../style';
+import '../../pagination/style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/table/style/var.scss b/packages/opendesign/src/components/table/style/var.scss
index 9e3afe92d7fdf16d5569decbce91efb1b8f3b630..50a64c4a1161926f86b7a1fbfce63679051db033 100644
--- a/packages/opendesign/src/components/table/style/var.scss
+++ b/packages/opendesign/src/components/table/style/var.scss
@@ -13,5 +13,6 @@
   --table-tip-color: var(--o-color-text3);
 
   --table-border: 1px solid var(--o-color-border2);
-  // --table-border: 1px solid var(--o-color-border1);
+  --table-loading-mask: var(--o-color-mask2);
+  --table-loading-color: var(--o-color-text3);
 }
diff --git a/packages/opendesign/src/components/table/table.ts b/packages/opendesign/src/components/table/table.ts
index 7ba097e2082e301c023d7cb57d1cff9b2270315d..d5d1e8586a0091342f44537f6c96a0c22a1053e7 100644
--- a/packages/opendesign/src/components/table/table.ts
+++ b/packages/opendesign/src/components/table/table.ts
@@ -41,15 +41,18 @@ export function getBodyData(columnData: Ref<TableColumnT[]>, bodyData?: TableRow
   if (!bodyData) {
     return [];
   }
+  let t = bodyData.length;
+  let s = 0;
 
-  const rowLength = bodyData.length;
   const colLenght = columnData.value.length;
 
   const rlt = [];
   let span = null;
   const skipCell: Record<string, boolean> = {};
+  console.log(s, t);
+  const end = Math.min(s + t, bodyData.length);
 
-  for (let r = 0; r < rowLength; r += 1) {
+  for (let r = s; r < end; r += 1) {
     const row = bodyData[r];
     let cols = [];
     for (let c = 0; c < colLenght; c += 1) {
@@ -86,4 +89,4 @@ export function getBodyData(columnData: Ref<TableColumnT[]>, bodyData?: TableRow
   }
 
   return rlt;
-}
\ No newline at end of file
+}
diff --git a/packages/opendesign/src/components/table/types.ts b/packages/opendesign/src/components/table/types.ts
index 5a98997d0e2b774ac140e7124424052a53298515..b603035e21d29a818d0af8895c25d698ea8a1fbe 100644
--- a/packages/opendesign/src/components/table/types.ts
+++ b/packages/opendesign/src/components/table/types.ts
@@ -1,4 +1,4 @@
-import { StyleValue } from 'vue';
+import { StyleValue, ExtractPropTypes, PropType } from 'vue';
 
 export interface TableColumnT {
   key: string,
@@ -15,4 +15,64 @@ export type ColumnKeysT = Array<string>;
 
 export type CellSpanT = (rowIndex: number, columnIndex: number) => { rowspan?: number; colspan?: number } | undefined;
 
-export type TableBorderT = 'all' | 'row' | 'column' | 'frame' | 'row-column' | 'row-frame' | 'column-frame' | 'none';
\ No newline at end of file
+export type TableBorderT = 'all' | 'row' | 'column' | 'frame' | 'row-column' | 'row-frame' | 'column-frame' | 'none';
+
+export const tableProps = {
+  /**
+   * 表头内容
+   */
+  columns: {
+    type: Array as PropType<TableColumnT[] | string[]>
+  },
+  /**
+   * 表头内容
+   */
+  columnKeys: {
+    type: Array as PropType<ColumnKeysT>,
+  },
+  /**
+   * 表格数据
+   */
+  data: {
+    type: Array as PropType<TableRowT[]>,
+  },
+  /**
+   * 是否显示边框
+   */
+  border: {
+    type: String as PropType<TableBorderT>,
+    default: 'row'
+  },
+  /**
+   * 是否小表格
+   */
+  small: {
+    type: Boolean,
+  },
+  /**
+   * 处理单元格合并(表体部分，不包含表头)
+   */
+  cellSpan: {
+    type: Function as PropType<CellSpanT>,
+  },
+  /**
+   * 空数据提示文本
+   */
+  emptyLabel: {
+    type: String,
+  },
+  /**
+   * 是否正在加载
+   */
+  loading: {
+    type: Boolean,
+  },
+  /**
+   * 加载提示文本
+   */
+  loadingLabel: {
+    type: String,
+  },
+};
+
+export type PopupPropsT = ExtractPropTypes<typeof tableProps>;
diff --git a/packages/opendesign/src/tokens/tokens.json b/packages/opendesign/src/tokens/tokens.json
index b5378a076c041da3a59f5cf0fa03cecd87008a83..fe7e48fec09deb9667c9dedcfc9a0282682608c0 100644
--- a/packages/opendesign/src/tokens/tokens.json
+++ b/packages/opendesign/src/tokens/tokens.json
@@ -406,6 +406,15 @@
           "light": "rgba(0, 0, 0, 0.5)",
           "'dark": "rgba(0, 0, 0, 0.5)"
         }
+      },
+      {
+        "key": "color-mask2",
+        "name": "遮罩色2",
+        "description": "用于loading遮罩色",
+        "value": {
+          "light": "rgba(0, 0, 0, 0.1)",
+          "'dark": "rgba(0, 0, 0, 0.1)"
+        }
       }
     ]
   },