From 563c8b9334a3d6feb7829677a1dea1aca7f4166d Mon Sep 17 00:00:00 2001
From: AC-0308 <pzzxtyh@qq.com>
Date: Tue, 22 Jul 2025 17:08:31 +0800
Subject: [PATCH] =?UTF-8?q?doc:=20=F0=9F=93=9D=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC(table)=E7=9A=84=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/_demo/types.ts        |  2 +-
 .../table/__docs__/__case__/TableBasic.vue    | 62 +++++++++++++++++++
 .../src/table/__docs__/__case__/TableDiy.vue  | 51 +++++++++++++++
 .../table/__docs__/__case__/TableDiyHead.vue  | 53 ++++++++++++++++
 .../__docs__/__case__/TablePagination.vue     | 55 ++++++++++++++++
 .../src/table/__docs__/__case__/TableSpan.vue | 61 ++++++++++++++++++
 .../src/table/__docs__/__case__/data.ts       | 32 ++++++++++
 .../src/table/__docs__/__case__/tableUsage.ts | 55 ++++++++++++++++
 .../src/table/__docs__/index.en-US.md         | 21 +++++++
 .../src/table/__docs__/index.zh-CN.md         | 21 +++++++
 10 files changed, 412 insertions(+), 1 deletion(-)
 create mode 100644 packages/opendesign/src/table/__docs__/__case__/TableBasic.vue
 create mode 100644 packages/opendesign/src/table/__docs__/__case__/TableDiy.vue
 create mode 100644 packages/opendesign/src/table/__docs__/__case__/TableDiyHead.vue
 create mode 100644 packages/opendesign/src/table/__docs__/__case__/TablePagination.vue
 create mode 100644 packages/opendesign/src/table/__docs__/__case__/TableSpan.vue
 create mode 100644 packages/opendesign/src/table/__docs__/__case__/data.ts
 create mode 100644 packages/opendesign/src/table/__docs__/__case__/tableUsage.ts
 create mode 100644 packages/opendesign/src/table/__docs__/index.en-US.md
 create mode 100644 packages/opendesign/src/table/__docs__/index.zh-CN.md

diff --git a/packages/opendesign/src/_demo/types.ts b/packages/opendesign/src/_demo/types.ts
index 065ab653..47bf954d 100644
--- a/packages/opendesign/src/_demo/types.ts
+++ b/packages/opendesign/src/_demo/types.ts
@@ -6,7 +6,7 @@ export type DocDemoSchema =
     }
   | {
       type: 'list';
-      list: Array<string | number>;
+      list: Array<string | number> | Readonly<Array<string | number>>;
       default?: string | number;
       label?: string;
     }
diff --git a/packages/opendesign/src/table/__docs__/__case__/TableBasic.vue b/packages/opendesign/src/table/__docs__/__case__/TableBasic.vue
new file mode 100644
index 00000000..d96d1200
--- /dev/null
+++ b/packages/opendesign/src/table/__docs__/__case__/TableBasic.vue
@@ -0,0 +1,62 @@
+<docs lang="md">
+<!--zh-CN-->
+### Basic
+
+<!--en-US-->
+### Basic
+</docs>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OTable } from '@opensig/opendesign';
+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(6),
+};
+const loading = ref(true);
+</script>
+<template>
+  <div class="sec">
+    <OTable :columns="table1.columns" :data="table1.data" />
+  </div>
+  <h4>Style: Small</h4>
+  <div class="sec">
+    <OTable :columns="table1.columns" :data="table1.data" small />
+  </div>
+
+  <h4>loading & Empty</h4>
+  <div class="sec">
+    <OTable :columns="table1.columns" :loading="loading" />
+    <br />
+    <OTable :columns="table1.columns" />
+  </div>
+
+  <h4>Style: Border</h4>
+  <div class="sec">
+    <h5>Border: all</h5>
+    <OTable :columns="table1.columns" :data="table1.data" border="all" />
+    <h5>Border: row</h5>
+    <OTable :columns="table1.columns" :data="table1.data" border="row" />
+    <h5>Border: column</h5>
+    <OTable :columns="table1.columns" :data="table1.data" border="column" />
+    <h5>Border: row-column</h5>
+    <OTable :columns="table1.columns" :data="table1.data" border="row-column" />
+    <h5>Border: row-frame</h5>
+    <OTable :columns="table1.columns" :data="table1.data" border="row-frame" />
+    <h5>Border: column-frame</h5>
+    <OTable :columns="table1.columns" :data="table1.data" border="column-frame" />
+  </div>
+</template>
+<style lang="scss">
+.sec {
+  margin-bottom: 24px;
+}
+</style>
diff --git a/packages/opendesign/src/table/__docs__/__case__/TableDiy.vue b/packages/opendesign/src/table/__docs__/__case__/TableDiy.vue
new file mode 100644
index 00000000..e07fcc04
--- /dev/null
+++ b/packages/opendesign/src/table/__docs__/__case__/TableDiy.vue
@@ -0,0 +1,51 @@
+<docs lang="md">
+<!--zh-CN-->
+### Diy
+
+<!--en-US-->
+### Diy
+</docs>
+
+<script setup lang="ts">
+import { OTable, OLink } from '@opensig/opendesign';
+import { getTableData } from './data';
+
+const columns1 = [
+  { label: 'Name', key: 'name' },
+  { label: 'Salary', key: 'salary' },
+  { label: 'Address', key: 'address' },
+  { label: 'Email', key: 'email' },
+  { label: 'Action', key: 'action' },
+];
+const table1 = {
+  columns: columns1,
+  data: getTableData(6),
+};
+</script>
+<template>
+  <div class="sec">
+    <OTable :columns="table1.columns" :data="table1.data">
+      <template #th_name="{ column }">diy: {{ column.label }}</template>
+      <template #td_name="{ row }">diy name: {{ row.name }}</template>
+      <template #action>
+        <OLink color="primary">删除</OLink>
+      </template>
+    </OTable>
+  </div>
+  <div class="sec">
+    <OTable :columns="table1.columns" :data="table1.data">
+      <template #header="{ columns }">
+        <th v-for="item in columns" :key="item.key">diy : {{ item.label }}</th>
+      </template>
+      <template #td-name="{ row }">diy name: {{ row.name }}</template>
+      <template #action>
+        <OLink color="primary">删除</OLink>
+      </template>
+    </OTable>
+  </div>
+</template>
+<style lang="scss">
+.sec {
+  margin-bottom: 24px;
+}
+</style>
diff --git a/packages/opendesign/src/table/__docs__/__case__/TableDiyHead.vue b/packages/opendesign/src/table/__docs__/__case__/TableDiyHead.vue
new file mode 100644
index 00000000..6624fe26
--- /dev/null
+++ b/packages/opendesign/src/table/__docs__/__case__/TableDiyHead.vue
@@ -0,0 +1,53 @@
+<docs lang="md">
+<!--zh-CN-->
+### 自定义表头
+
+<!--en-US-->
+### Costume Header
+</docs>
+
+<script setup lang="ts">
+import { OTable } from '@opensig/opendesign';
+import { getTableData } from './data';
+
+interface ColItemT {
+  label: string;
+  key: string;
+  rowspan?: number;
+  colspan?: number;
+  last?: boolean;
+}
+const columns1: ColItemT[][] = [
+  [
+    { label: 'Name', key: 'name', rowspan: 2 },
+    { label: 'Info', key: 'info', colspan: 3 },
+    { label: 'Other', key: 'other', rowspan: 2, last: true },
+  ],
+  [
+    { label: 'Salary', key: 'salary' },
+    { label: 'Address', key: 'address' },
+    { label: 'Email', key: 'email' },
+  ],
+];
+const columnKeys = ['name', 'salary', 'address', 'email', 'other'];
+
+const tableData = getTableData(6);
+</script>
+<template>
+  <div class="sec">
+    <OTable :data="tableData" :columns="columnKeys">
+      <template #header>
+        <tr v-for="(row, idx) in columns1" :key="idx">
+          <th v-for="col in row" :key="col.key" :rowspan="col.rowspan" :colspan="col.colspan" :class="{ last: col.last }">
+            {{ col.label }}
+          </th>
+        </tr>
+      </template>
+    </OTable>
+  </div>
+</template>
+<style lang="scss">
+.sec {
+  margin-bottom: 24px;
+}
+</style>
diff --git a/packages/opendesign/src/table/__docs__/__case__/TablePagination.vue b/packages/opendesign/src/table/__docs__/__case__/TablePagination.vue
new file mode 100644
index 00000000..df60997d
--- /dev/null
+++ b/packages/opendesign/src/table/__docs__/__case__/TablePagination.vue
@@ -0,0 +1,55 @@
+<docs lang="md">
+<!--zh-CN-->
+### 分页
+
+<!--en-US-->
+### Pagination
+</docs>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+import { OTable, OPagination } from '@opensig/opendesign';
+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>
+  <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/table/__docs__/__case__/TableSpan.vue b/packages/opendesign/src/table/__docs__/__case__/TableSpan.vue
new file mode 100644
index 00000000..3926eb19
--- /dev/null
+++ b/packages/opendesign/src/table/__docs__/__case__/TableSpan.vue
@@ -0,0 +1,61 @@
+<docs lang="md">
+<!--zh-CN-->
+### 单元格合并
+
+<!--en-US-->
+### Cell Merge
+</docs>
+
+<script setup lang="ts">
+import { OTable } from '@opensig/opendesign';
+import { getTableData } from './data';
+
+const columns2 = [
+  { label: 'No 0', key: 'no' },
+  { label: 'Name 1', key: 'name' },
+  { label: 'Salary 2', key: 'salary' },
+  { label: 'Address 3', key: 'address' },
+  { label: 'Email 4', key: 'email' },
+  { label: 'Other 5', key: 'other' },
+];
+const tableData = getTableData(6);
+
+function cellSpanFn(rowIdx: number, colIdx: number) {
+  if (rowIdx === 2 && colIdx === 2) {
+    return {
+      rowspan: 2,
+      // colspan: 2,
+    };
+  }
+  if (rowIdx === 0 && colIdx === 0) {
+    return {
+      rowspan: 2,
+      colspan: 2,
+    };
+  }
+
+  if (rowIdx === 0 && colIdx === 4) {
+    return {
+      rowspan: 2,
+    };
+  }
+
+  if (rowIdx === 2 && colIdx === 5) {
+    return {
+      rowspan: 2,
+    };
+  }
+}
+</script>
+<template>
+  <div class="sec">
+    <OTable border="all" :data="tableData" :columns="columns2" :cell-span="cellSpanFn">
+      <template #td_name="{ row }">name: {{ row.name }}</template>
+    </OTable>
+  </div>
+</template>
+<style lang="scss">
+.sec {
+  margin-bottom: 24px;
+}
+</style>
diff --git a/packages/opendesign/src/table/__docs__/__case__/data.ts b/packages/opendesign/src/table/__docs__/__case__/data.ts
new file mode 100644
index 00000000..c982081d
--- /dev/null
+++ b/packages/opendesign/src/table/__docs__/__case__/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/table/__docs__/__case__/tableUsage.ts b/packages/opendesign/src/table/__docs__/__case__/tableUsage.ts
new file mode 100644
index 00000000..ab5df0b1
--- /dev/null
+++ b/packages/opendesign/src/table/__docs__/__case__/tableUsage.ts
@@ -0,0 +1,55 @@
+import { reactive } from 'vue';
+import { propsToAttrStr } from '../../../_demo/utils';
+import { DocDemoSchema, DocDemoTemplate } from '../../../_demo/types.ts';
+import { getTableData } from './data.ts';
+import { TableBorderTypes } from '@opensig/opendesign';
+
+export const docs = {
+  'zh-CN':
+    '表格用于展示密集数据集，可配置项包括：  \n' +
+    '- 表头内容`columns`  \n' +
+    '- 表格数据`data`  \n' +
+    '- 是否显示边框`border`  \n' +
+    '- 是否小表格`small`  \n' +
+    '- 单元格合并`cellSpan`  \n' +
+    '- 空数据提示文本`emptyLabel`  \n' +
+    '- 是否正在加载`loading`  \n' +
+    '- 加载提示文本`loadingLabel`  \n'
+};
+
+export const schema = {
+  border: {
+    type: 'list',
+    list: TableBorderTypes
+  },
+  loading: {
+    type: 'boolean',
+    default: false
+  },
+  small: {
+    type: 'boolean',
+    default: false
+  },
+  emptyLabel: {
+    type: 'string',
+    default: undefined
+  },
+  loadingLabel: {
+    type: 'string',
+    default: undefined
+  },
+} satisfies Record<string, DocDemoSchema>;
+
+export const ctx = reactive({
+  columns: [
+    { label: 'Name', key: 'name' },
+    { label: 'Salary', key: 'salary' },
+    { label: 'Address', key: 'address' },
+    { label: 'Email', key: 'email' },
+  ],
+  data: getTableData(6)
+});
+
+export const template:DocDemoTemplate<typeof schema> = (_props) => {
+  return `<OTable ${propsToAttrStr(_props)} :columns="ctx.columns" :data="ctx.data" />`;
+};
\ No newline at end of file
diff --git a/packages/opendesign/src/table/__docs__/index.en-US.md b/packages/opendesign/src/table/__docs__/index.en-US.md
new file mode 100644
index 00000000..3707ded6
--- /dev/null
+++ b/packages/opendesign/src/table/__docs__/index.en-US.md
@@ -0,0 +1,21 @@
+---
+sidebar: OTable
+---
+
+# Data Table
+
+## Usage
+
+<!-- @usage tableUsage -->
+
+## Cases
+
+<!-- @case TableBasic -->
+<!-- @case TableDiy -->
+<!-- @case TableDiyHead -->
+<!-- @case TablePagination -->
+<!-- @case TableSpan -->
+
+## Api
+
+<!-- @api OTable -->
\ No newline at end of file
diff --git a/packages/opendesign/src/table/__docs__/index.zh-CN.md b/packages/opendesign/src/table/__docs__/index.zh-CN.md
new file mode 100644
index 00000000..5efe5fb2
--- /dev/null
+++ b/packages/opendesign/src/table/__docs__/index.zh-CN.md
@@ -0,0 +1,21 @@
+---
+sidebar: OTable 数据表格
+---
+
+# 数据表格
+
+## 使用
+
+<!-- @usage tableUsage -->
+
+## 示例
+
+<!-- @case TableBasic -->
+<!-- @case TableDiy -->
+<!-- @case TableDiyHead -->
+<!-- @case TablePagination -->
+<!-- @case TableSpan -->
+
+## Api
+
+<!-- @api OTable -->
\ No newline at end of file
-- 
Gitee