From 482652c756a0a4e310b33bc6d4aee9cfada13c8e Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 14 Feb 2023 19:48:14 +0800
Subject: [PATCH 1/2] =?UTF-8?q?table=E5=A2=9E=E5=8A=A0=E5=88=86=E9=A1=B5?=
 =?UTF-8?q?=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/pagination/OPagination.vue |  25 +++-
 .../src/components/pagination/index.ts        |   1 +
 .../src/components/pagination/types.ts        |  28 +++++
 .../src/components/table/OTable.vue           | 112 +++++++++++++-----
 .../components/table/__demo__/IndexTable.vue  |   4 +-
 .../components/table/__demo__/TableBasic.vue  |  34 +-----
 .../table/__demo__/TableDiyHead.vue           |  44 +------
 .../table/__demo__/TablePagination.vue        |  28 +++++
 .../components/table/__demo__/TableSpan.vue   |  49 +-------
 .../src/components/table/__demo__/data.ts     |  19 +++
 .../src/components/table/style/index.scss     |   5 +
 .../src/components/table/style/index.ts       |   1 +
 .../opendesign/src/components/table/table.ts  |  12 +-
 .../opendesign/src/components/table/types.ts  |  26 +++-
 14 files changed, 222 insertions(+), 166 deletions(-)
 create mode 100644 packages/opendesign/src/components/table/__demo__/TablePagination.vue
 create mode 100644 packages/opendesign/src/components/table/__demo__/data.ts

diff --git a/packages/opendesign/src/components/pagination/OPagination.vue b/packages/opendesign/src/components/pagination/OPagination.vue
index 6d626850..61de4f91 100644
--- a/packages/opendesign/src/components/pagination/OPagination.vue
+++ b/packages/opendesign/src/components/pagination/OPagination.vue
@@ -1,10 +1,11 @@
 <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 { defaultPageSizes } from './types';
 
 interface PaginationPropT {
   /**
@@ -18,7 +19,7 @@ interface PaginationPropT {
   /**
    * 数据总条数
    */
-  total: number;
+  total?: number;
   /**
    * 当前页码
    */
@@ -34,10 +35,11 @@ interface PaginationPropT {
 }
 
 const props = withDefaults(defineProps<PaginationPropT>(), {
-  pageSizes: () => [6, 12, 24, 48],
-  pageSize: 6,
+  pageSizes: () => defaultPageSizes,
+  pageSize: defaultPageSizes[0],
   currentPage: 1,
   showPageCount: 9,
+  total: 0,
 });
 const emits = defineEmits<{
   (e: 'update:pageSize', value: number): void;
@@ -112,15 +114,26 @@ 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);
   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);
+
+    emits('change', {
+      current: currentPage.value,
+      size: currentPageSize.value,
+    });
   });
 };
+
+defineExpose<{
+  pageCount: Ref<number>;
+}>({
+  pageCount: totalPage,
+});
 </script>
 <template>
   <div class="o-pagination">
diff --git a/packages/opendesign/src/components/pagination/index.ts b/packages/opendesign/src/components/pagination/index.ts
index 09fbd47d..a07fbd34 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/types.ts b/packages/opendesign/src/components/pagination/types.ts
index e69de29b..eb8d4eb7 100644
--- a/packages/opendesign/src/components/pagination/types.ts
+++ b/packages/opendesign/src/components/pagination/types.ts
@@ -0,0 +1,28 @@
+export interface PaginationPropT {
+  /**
+   * 数据总条数
+   */
+  total?: number;
+  /**
+   * 当前页码
+   */
+  currentPage?: number;
+  /**
+   * 每页数据条数
+   */
+  pageSize?: number;
+  /**
+   * 支持选择的每页数据条数
+   */
+  pageSizes?: number[];
+  /**
+   * 显示页面数 > 3
+   */
+  showPageCount?: number;
+  /**
+   * 简洁模式
+   */
+  simple?: boolean;
+}
+
+export const defaultPageSizes = [6, 12, 24, 48];
\ No newline at end of file
diff --git a/packages/opendesign/src/components/table/OTable.vue b/packages/opendesign/src/components/table/OTable.vue
index 59d7f279..d3f85709 100644
--- a/packages/opendesign/src/components/table/OTable.vue
+++ b/packages/opendesign/src/components/table/OTable.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { TableColumnT, TableRowT, ColumnKeysT, CellSpanT, TableBorderT } from './types';
 import { getColumnData, getBodyData } from './table';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { IconLoading } from '../_shared/icons';
 import { isString } from '../_shared/is';
+import { OPagination, PaginationPropT, defaultPageSizes } from '../pagination';
 
 interface TablePropT {
   /**
@@ -42,22 +43,60 @@ interface TablePropT {
    * 加载提示文本
    */
   loadingLabel?: string;
+  /**
+   * 页码配置
+   */
+  pagination?: PaginationPropT | false;
 }
 
 const props = withDefaults(defineProps<TablePropT>(), {
-  small: false,
-  cellSpan: undefined,
   columns: undefined,
   columnKeys: undefined,
   data: undefined,
+  small: false,
+  cellSpan: undefined,
+  border: 'row',
   emptyLabel: '',
   loadingLabel: '',
-  border: 'row',
+  pagination: undefined,
 });
 
 const columnData = computed(() => getColumnData(props.columns));
 
-const tableData = computed(() => getBodyData(columnData, props.data, props.cellSpan));
+const currentPage = ref(props.pagination ? props.pagination.currentPage ?? 1 : 1);
+
+const pageSize = computed(() => {
+  if (props.pagination === false) {
+    return props.data?.length ?? 0;
+  } else {
+    return props.pagination?.pageSize ?? defaultPageSizes[0];
+  }
+});
+const currentPageSize = ref(pageSize.value);
+
+const totalCount = computed(() => props.data?.length ?? 0);
+
+const pagination = computed<PaginationPropT | false>(() => {
+  if (props.pagination === false) {
+    return false;
+  }
+
+  return {
+    ...props.pagination,
+    total: props.data?.length,
+  };
+});
+
+const showPagination = computed(() => {
+  if (pagination.value === false || props.loading || !props.data || props.data.length === 0) {
+    return false;
+  }
+  console.log(pagination.value);
+
+  return totalCount.value > pageSize.value;
+});
+
+const tableData = computed(() => getBodyData(columnData, props.data, currentPage.value, currentPageSize.value, props.cellSpan));
 
 const emptyLabel = props.emptyLabel || '无数据';
 const loadingLabel = props.loadingLabel || '正在加载...';
@@ -68,46 +107,55 @@ const boderClass = computed(() => {
   }
   return '';
 });
+
+const onPageChange = ({ current, size }: { current: number; size: number }) => {
+  currentPage.value = current;
+  currentPageSize.value = size;
+};
 </script>
 <template>
   <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>
+    <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="!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>
+          </slot>
+        </tbody>
+      </table>
+      <div v-if="props.loading" class="o-table-tip-wrap">
+        <slot name="loading">
+          <IconLoading class="o-rotating" />
+          <div class="o-table-loading-label">{{ loadingLabel }}</div>
         </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>
+      <div v-else-if="!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">
-      <slot name="loading">
-        <IconLoading class="o-rotating" />
-        <div class="o-table-loading-label">{{ loadingLabel }}</div>
-      </slot>
+      </div>
     </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 v-if="showPagination" class="o-table-pagination-wrap">
+      <OPagination v-bind="pagination" ref="paginationRef" class="o-table-pagination" @change="onPageChange" />
     </div>
   </div>
 </template>
diff --git a/packages/opendesign/src/components/table/__demo__/IndexTable.vue b/packages/opendesign/src/components/table/__demo__/IndexTable.vue
index ae99bd6a..9b686f11 100644
--- a/packages/opendesign/src/components/table/__demo__/IndexTable.vue
+++ b/packages/opendesign/src/components/table/__demo__/IndexTable.vue
@@ -7,9 +7,9 @@ import TableDiyHead from './TableDiyHead.vue';
 </script>
 <template>
   <div class="page-demo">
-    <TableSpan />
-    <TableDiyHead />
     <TableBasic />
+    <TableDiyHead />
+    <TableSpan />
   </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 8ed2de5f..960fb353 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(20),
 };
 const loading = ref(true);
 </script>
diff --git a/packages/opendesign/src/components/table/__demo__/TableDiyHead.vue b/packages/opendesign/src/components/table/__demo__/TableDiyHead.vue
index 44ee002b..1e92b9fd 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(20);
 </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 00000000..60661db7
--- /dev/null
+++ b/packages/opendesign/src/components/table/__demo__/TablePagination.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OTable } from '../index';
+import { getTableData } from './data';
+
+const columns1 = [
+  { label: 'Name', key: 'name' },
+  { label: 'Salary', key: 'salary' },
+  { label: 'Address', key: 'address' },
+  { label: 'Email', key: 'email' },
+];
+const table1 = {
+  columns: columns1,
+  data: getTableData(20),
+};
+const loading = ref(true);
+</script>
+<template>
+  <h4>Basic</h4>
+  <div class="sec">
+    <OTable :columns="table1.columns" :data="table1.data" />
+  </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 3e3a5750..bf8dc3db 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(20);
 
 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 00000000..3144b18a
--- /dev/null
+++ b/packages/opendesign/src/components/table/__demo__/data.ts
@@ -0,0 +1,19 @@
+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) {
+  const rlt = [];
+  for (let i = 1; i <= total; i++) {
+    rlt.push(getItem(i));
+  }
+  return rlt;
+}
\ 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 07dc5cbe..cae0a7bb 100644
--- a/packages/opendesign/src/components/table/style/index.scss
+++ b/packages/opendesign/src/components/table/style/index.scss
@@ -94,3 +94,8 @@
 .o-table-loading-label {
   margin-left: 8px;
 }
+.o-table-pagination-wrap {
+  margin-top: 12px;
+  display: flex;
+  justify-content: flex-end;
+}
diff --git a/packages/opendesign/src/components/table/style/index.ts b/packages/opendesign/src/components/table/style/index.ts
index 591b2fbd..6bc955b9 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/table.ts b/packages/opendesign/src/components/table/table.ts
index 7ba097e2..f1ebea9b 100644
--- a/packages/opendesign/src/components/table/table.ts
+++ b/packages/opendesign/src/components/table/table.ts
@@ -1,6 +1,7 @@
 import { Ref } from 'vue';
 import { isArray, isFunction, isString } from '../_shared/is';
 import { TableColumnT, TableRowT, CellSpanT } from './types';
+import { PaginationPropT } from '../pagination';
 
 export function getColumnData(columns?: string[] | TableColumnT[]): TableColumnT[] {
   if (!isArray(columns)) {
@@ -37,19 +38,22 @@ interface CellT {
   last?: boolean
 }
 
-export function getBodyData(columnData: Ref<TableColumnT[]>, bodyData?: TableRowT[], cellSpan?: CellSpanT) {
+export function getBodyData(columnData: Ref<TableColumnT[]>, bodyData?: TableRowT[], pageIndex = 1, pageSize?: number, cellSpan?: CellSpanT) {
   if (!bodyData) {
     return [];
   }
+  let t = pageSize ?? bodyData.length;
+  let s = (pageIndex - 1) * t;
 
-  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 +90,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 5a98997d..a4505f22 100644
--- a/packages/opendesign/src/components/table/types.ts
+++ b/packages/opendesign/src/components/table/types.ts
@@ -15,4 +15,28 @@ 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 interface TablePaginationT {
+  /**
+  * 当前页码
+  */
+  currentPage?: number;
+  /**
+   * 每页数据条数
+   */
+  pageSize?: number;
+  /**
+   * 支持选择的每页数据条数
+   */
+  pageSizes?: number[];
+  /**
+   * 显示页面数 > 3
+   */
+  showPageCount?: number;
+  /**
+   * 简洁模式
+   */
+  simple?: boolean;
+}
\ No newline at end of file
-- 
Gitee


From bdf656fe4c334b9198b975ecbea4a143019b12eb Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 17 Feb 2023 15:15:54 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E5=92=8C=E5=88=86?=
 =?UTF-8?q?=E9=A1=B5=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/opendesign.token.code-snippets        |   8 ++
 packages/docs/global.md                       |   7 ++
 .../src/components/pagination/OPagination.vue |  67 ++++------
 .../pagination/__demo__/PaginationBasic.vue   |  11 +-
 .../components/pagination/style/index.scss    |  11 +-
 .../src/components/pagination/types.ts        |  53 ++++++--
 .../src/components/popup/OPopup.vue           | 111 +----------------
 .../opendesign/src/components/popup/types.ts  | 115 ++++++++++++++++-
 .../components/style/default-light.token.css  |   7 ++
 .../src/components/table/OTable.vue           | 117 ++----------------
 .../components/table/__demo__/IndexTable.vue  |   3 +
 .../components/table/__demo__/TableBasic.vue  |   3 +-
 .../table/__demo__/TableDiyHead.vue           |   2 +-
 .../table/__demo__/TablePagination.vue        |  37 ++++--
 .../components/table/__demo__/TableSpan.vue   |   2 +-
 .../src/components/table/__demo__/data.ts     |  19 ++-
 .../src/components/table/style/index.scss     |  24 +++-
 .../src/components/table/style/var.scss       |   3 +-
 .../opendesign/src/components/table/table.ts  |   7 +-
 .../opendesign/src/components/table/types.ts  |  66 +++++++---
 packages/opendesign/src/tokens/tokens.json    |   9 ++
 21 files changed, 363 insertions(+), 319 deletions(-)

diff --git a/.vscode/opendesign.token.code-snippets b/.vscode/opendesign.token.code-snippets
index f46c4e84..e4222b68 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 aa5ad896..aaf6bca0 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 61de4f91..ab015c02 100644
--- a/packages/opendesign/src/components/pagination/OPagination.vue
+++ b/packages/opendesign/src/components/pagination/OPagination.vue
@@ -5,46 +5,14 @@ import { OPopover } from '../popover';
 import { OInputNumber } from '../input-number';
 import { OSelect } from '../select';
 import { OOption } from '../option';
-import { defaultPageSizes } from './types';
-
-interface PaginationPropT {
-  /**
-   * 支持选择的每页数据条数
-   */
-  pageSizes?: number[];
-  /**
-   * 每页数据条数
-   */
-  pageSize?: number;
-  /**
-   * 数据总条数
-   */
-  total?: number;
-  /**
-   * 当前页码
-   */
-  currentPage?: number;
-  /**
-   * 显示页面数 > 3
-   */
-  showPageCount?: number;
-  /**
-   * 简洁模式
-   */
-  simple?: boolean;
-}
-
-const props = withDefaults(defineProps<PaginationPropT>(), {
-  pageSizes: () => defaultPageSizes,
-  pageSize: defaultPageSizes[0],
-  currentPage: 1,
-  showPageCount: 9,
-  total: 0,
-});
+import { paginationProps } from './types';
+
+const props = defineProps(paginationProps);
+
 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 = {
@@ -55,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;
@@ -83,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);
 };
@@ -115,6 +83,7 @@ const goToChange = (val: string | number) => {
 const pageSizeChange = (val: string | number) => {
   // updateCurrentPage(Number(val));
   const currentIndex = currentPageSize.value * (currentPage.value - 1);
+  const oldPage = currentPage.value;
   currentPageSize.value = Number(val);
   nextTick(() => {
     currentPage.value = Math.floor(currentIndex / currentPageSize.value) + 1;
@@ -122,9 +91,13 @@ const pageSizeChange = (val: string | number) => {
 
     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', {
-      current: currentPage.value,
-      size: currentPageSize.value,
+      page: currentPage.value,
+      pageSize: currentPageSize.value,
     });
   });
 };
@@ -138,7 +111,9 @@ defineExpose<{
 <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">
@@ -146,6 +121,7 @@ defineExpose<{
           </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">
@@ -188,7 +164,8 @@ defineExpose<{
           &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 74086d10..b5acdfb9 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/style/index.scss b/packages/opendesign/src/components/pagination/style/index.scss
index 60a58164..dbfdfc88 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 eb8d4eb7..8d7f5f18 100644
--- a/packages/opendesign/src/components/pagination/types.ts
+++ b/packages/opendesign/src/components/pagination/types.ts
@@ -1,28 +1,55 @@
-export interface PaginationPropT {
+import { ExtractPropTypes, PropType } from 'vue';
+
+const pageSizes = [6, 12, 24, 48];
+
+export const paginationProps = {
   /**
-   * 数据总条数
+   * 支持选择的每页数据条数
    */
-  total?: number;
+  pageSizes: {
+    type: Array as PropType<number[]>,
+    default: () => pageSizes
+  },
   /**
-   * 当前页码
+   * 每页数据条数
    */
-  currentPage?: number;
+  pageSize: {
+    type: Number,
+    default: pageSizes[0]
+  },
   /**
-   * 每页数据条数
+   * 数据总条数
    */
-  pageSize?: number;
+  total: {
+    type: Number,
+    default: 0
+  },
   /**
-   * 支持选择的每页数据条数
+   * 当前页码
+   */
+  page: {
+    type: Number,
+    default: 1
+  },
+  /**
+   * 显示页面数 > 3
    */
-  pageSizes?: number[];
+  showPageCount: {
+    type: Number,
+    default: 9
+  },
   /**
    * 显示页面数 > 3
    */
-  showPageCount?: number;
+  showJumper: {
+    type: Boolean
+  },
   /**
    * 简洁模式
    */
-  simple?: boolean;
-}
+  simple: {
+    type: Boolean
+  },
+};
 
-export const defaultPageSizes = [6, 12, 24, 48];
\ No newline at end of file
+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 fdee19f2..17fcb0b2 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 9a241c11..38e11f56 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 abb3f6a4..0677d8d0 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 d3f85709..ebbacf4b 100644
--- a/packages/opendesign/src/components/table/OTable.vue
+++ b/packages/opendesign/src/components/table/OTable.vue
@@ -1,102 +1,17 @@
 <script setup lang="ts">
-import { TableColumnT, TableRowT, ColumnKeysT, CellSpanT, TableBorderT } from './types';
+import { tableProps } from './types';
 import { getColumnData, getBodyData } from './table';
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { IconLoading } from '../_shared/icons';
 import { isString } from '../_shared/is';
-import { OPagination, PaginationPropT, defaultPageSizes } from '../pagination';
 
-interface TablePropT {
-  /**
-   * 表头内容
-   */
-  columns?: TableColumnT[] | string[];
-  /**
-   * 表头内容
-   */
-  columnKeys?: ColumnKeysT;
-  /**
-   * 表格数据
-   */
-  data?: TableRowT[];
-  /**
-   * 是否显示边框
-   */
-  border?: TableBorderT;
-  /**
-   * 是否小表格
-   */
-  small?: boolean;
-  /**
-   * 处理单元格合并(表体部分，不包含表头)
-   */
-  cellSpan?: CellSpanT;
-  /**
-   * 空数据提示文本
-   */
-  emptyLabel?: string;
-  /**
-   * 是否正在加载
-   */
-  loading?: boolean;
-  /**
-   * 加载提示文本
-   */
-  loadingLabel?: string;
-  /**
-   * 页码配置
-   */
-  pagination?: PaginationPropT | false;
-}
+const props = defineProps(tableProps);
 
-const props = withDefaults(defineProps<TablePropT>(), {
-  columns: undefined,
-  columnKeys: undefined,
-  data: undefined,
-  small: false,
-  cellSpan: undefined,
-  border: 'row',
-  emptyLabel: '',
-  loadingLabel: '',
-  pagination: undefined,
-});
+const emits = defineEmits<{}>();
 
 const columnData = computed(() => getColumnData(props.columns));
 
-const currentPage = ref(props.pagination ? props.pagination.currentPage ?? 1 : 1);
-
-const pageSize = computed(() => {
-  if (props.pagination === false) {
-    return props.data?.length ?? 0;
-  } else {
-    return props.pagination?.pageSize ?? defaultPageSizes[0];
-  }
-});
-const currentPageSize = ref(pageSize.value);
-
-const totalCount = computed(() => props.data?.length ?? 0);
-
-const pagination = computed<PaginationPropT | false>(() => {
-  if (props.pagination === false) {
-    return false;
-  }
-
-  return {
-    ...props.pagination,
-    total: props.data?.length,
-  };
-});
-
-const showPagination = computed(() => {
-  if (pagination.value === false || props.loading || !props.data || props.data.length === 0) {
-    return false;
-  }
-  console.log(pagination.value);
-
-  return totalCount.value > pageSize.value;
-});
-
-const tableData = computed(() => getBodyData(columnData, props.data, currentPage.value, currentPageSize.value, props.cellSpan));
+const tableData = computed(() => getBodyData(columnData, props.data, props.cellSpan));
 
 const emptyLabel = props.emptyLabel || '无数据';
 const loadingLabel = props.loadingLabel || '正在加载...';
@@ -107,11 +22,6 @@ const boderClass = computed(() => {
   }
   return '';
 });
-
-const onPageChange = ({ current, size }: { current: number; size: number }) => {
-  currentPage.value = current;
-  currentPageSize.value = size;
-};
 </script>
 <template>
   <div
@@ -132,7 +42,7 @@ const onPageChange = ({ current, size }: { current: number; size: number }) => {
             <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">
+        <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">
@@ -142,20 +52,17 @@ const onPageChange = ({ current, size }: { current: number; size: number }) => {
           </slot>
         </tbody>
       </table>
-      <div v-if="props.loading" class="o-table-tip-wrap">
-        <slot name="loading">
-          <IconLoading class="o-rotating" />
-          <div class="o-table-loading-label">{{ loadingLabel }}</div>
-        </slot>
-      </div>
-      <div v-else-if="!props.data || props.data.length === 0" class="o-table-tip-wrap">
+      <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>
       </div>
     </div>
-    <div v-if="showPagination" class="o-table-pagination-wrap">
-      <OPagination v-bind="pagination" ref="paginationRef" class="o-table-pagination" @change="onPageChange" />
+    <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>
 </template>
diff --git a/packages/opendesign/src/components/table/__demo__/IndexTable.vue b/packages/opendesign/src/components/table/__demo__/IndexTable.vue
index 9b686f11..068d8b5f 100644
--- a/packages/opendesign/src/components/table/__demo__/IndexTable.vue
+++ b/packages/opendesign/src/components/table/__demo__/IndexTable.vue
@@ -1,7 +1,9 @@
 <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>
@@ -10,6 +12,7 @@ import TableDiyHead from './TableDiyHead.vue';
     <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 960fb353..ae48b371 100644
--- a/packages/opendesign/src/components/table/__demo__/TableBasic.vue
+++ b/packages/opendesign/src/components/table/__demo__/TableBasic.vue
@@ -11,7 +11,7 @@ const columns1 = [
 ];
 const table1 = {
   columns: columns1,
-  data: getTableData(20),
+  data: getTableData(6),
 };
 const loading = ref(true);
 </script>
@@ -26,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 1e92b9fd..528ead81 100644
--- a/packages/opendesign/src/components/table/__demo__/TableDiyHead.vue
+++ b/packages/opendesign/src/components/table/__demo__/TableDiyHead.vue
@@ -23,7 +23,7 @@ const columns1: ColItemT[][] = [
 ];
 const columnKeys = ['name', 'salary', 'address', 'email', 'other'];
 
-const tableData = getTableData(20);
+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
index 60661db7..76b9f715 100644
--- a/packages/opendesign/src/components/table/__demo__/TablePagination.vue
+++ b/packages/opendesign/src/components/table/__demo__/TablePagination.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, reactive } from 'vue';
 import { OTable } from '../index';
-import { getTableData } from './data';
+import { OPagination } from '../../pagination';
+import { requestTableData } from './data';
 
 const columns1 = [
   { label: 'Name', key: 'name' },
@@ -9,16 +10,36 @@ const columns1 = [
   { label: 'Address', key: 'address' },
   { label: 'Email', key: 'email' },
 ];
-const table1 = {
-  columns: columns1,
-  data: getTableData(20),
-};
+
 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>Basic</h4>
+  <h4>Pagination</h4>
   <div class="sec">
-    <OTable :columns="table1.columns" :data="table1.data" />
+    <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">
diff --git a/packages/opendesign/src/components/table/__demo__/TableSpan.vue b/packages/opendesign/src/components/table/__demo__/TableSpan.vue
index bf8dc3db..2a22c4cb 100644
--- a/packages/opendesign/src/components/table/__demo__/TableSpan.vue
+++ b/packages/opendesign/src/components/table/__demo__/TableSpan.vue
@@ -10,7 +10,7 @@ const columns2 = [
   { label: 'Email 4', key: 'email' },
   { label: 'Other 5', key: 'other' },
 ];
-const tableData = getTableData(20);
+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
index 3144b18a..c982081d 100644
--- a/packages/opendesign/src/components/table/__demo__/data.ts
+++ b/packages/opendesign/src/components/table/__demo__/data.ts
@@ -10,10 +10,23 @@ function getItem(index: number) {
   };
 }
 
-export function getTableData(total: number) {
+export function getTableData(total: number, idx = 0) {
   const rlt = [];
-  for (let i = 1; i <= total; i++) {
-    rlt.push(getItem(i));
+  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 cae0a7bb..77e658cb 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,18 +87,27 @@
   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 {
   margin-left: 8px;
 }
-.o-table-pagination-wrap {
-  margin-top: 12px;
-  display: flex;
-  justify-content: flex-end;
-}
diff --git a/packages/opendesign/src/components/table/style/var.scss b/packages/opendesign/src/components/table/style/var.scss
index 9e3afe92..50a64c4a 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 f1ebea9b..d5d1e858 100644
--- a/packages/opendesign/src/components/table/table.ts
+++ b/packages/opendesign/src/components/table/table.ts
@@ -1,7 +1,6 @@
 import { Ref } from 'vue';
 import { isArray, isFunction, isString } from '../_shared/is';
 import { TableColumnT, TableRowT, CellSpanT } from './types';
-import { PaginationPropT } from '../pagination';
 
 export function getColumnData(columns?: string[] | TableColumnT[]): TableColumnT[] {
   if (!isArray(columns)) {
@@ -38,12 +37,12 @@ interface CellT {
   last?: boolean
 }
 
-export function getBodyData(columnData: Ref<TableColumnT[]>, bodyData?: TableRowT[], pageIndex = 1, pageSize?: number, cellSpan?: CellSpanT) {
+export function getBodyData(columnData: Ref<TableColumnT[]>, bodyData?: TableRowT[], cellSpan?: CellSpanT) {
   if (!bodyData) {
     return [];
   }
-  let t = pageSize ?? bodyData.length;
-  let s = (pageIndex - 1) * t;
+  let t = bodyData.length;
+  let s = 0;
 
   const colLenght = columnData.value.length;
 
diff --git a/packages/opendesign/src/components/table/types.ts b/packages/opendesign/src/components/table/types.ts
index a4505f22..b603035e 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,
@@ -17,26 +17,62 @@ export type CellSpanT = (rowIndex: number, columnIndex: number) => { rowspan?: n
 
 export type TableBorderT = 'all' | 'row' | 'column' | 'frame' | 'row-column' | 'row-frame' | 'column-frame' | 'none';
 
-
-export interface TablePaginationT {
+export const tableProps = {
+  /**
+   * 表头内容
+   */
+  columns: {
+    type: Array as PropType<TableColumnT[] | string[]>
+  },
   /**
-  * 当前页码
-  */
-  currentPage?: number;
+   * 表头内容
+   */
+  columnKeys: {
+    type: Array as PropType<ColumnKeysT>,
+  },
+  /**
+   * 表格数据
+   */
+  data: {
+    type: Array as PropType<TableRowT[]>,
+  },
   /**
-   * 每页数据条数
+   * 是否显示边框
    */
-  pageSize?: number;
+  border: {
+    type: String as PropType<TableBorderT>,
+    default: 'row'
+  },
   /**
-   * 支持选择的每页数据条数
+   * 是否小表格
    */
-  pageSizes?: number[];
+  small: {
+    type: Boolean,
+  },
   /**
-   * 显示页面数 > 3
+   * 处理单元格合并(表体部分，不包含表头)
    */
-  showPageCount?: number;
+  cellSpan: {
+    type: Function as PropType<CellSpanT>,
+  },
   /**
-   * 简洁模式
+   * 空数据提示文本
    */
-  simple?: boolean;
-}
\ No newline at end of file
+  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 b5378a07..fe7e48fe 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)"
+        }
       }
     ]
   },
-- 
Gitee