Repository: Tencent/tdesign-vue-next
Pull request #5728 (2025-07-11 03:38:21)

docs(dialog): the nested dialogs are supplemented with parameters
closed #5625

<!--
首先，感谢你的贡献！😄
请阅读并遵循 [TDesign 贡献指南](https://github.com/Tencent/tdesign/blob/main/docs/contributing.md)，填写以下 pull request 的信息。
PR 在维护者审核通过后会合并，谢谢！
-->

### 🤔 这个 PR 的性质是？

- [ ] 日常 bug 修复
- [ ] 新特性提交
- [x] 文档改进
- [ ] 演示代码改进
- [ ] 组件样式/交互改进
- [ ] CI/CD 改进
- [ ] 重构
- [ ] 代码风格优化
- [ ] 测试用例
- [ ] 分支合并
- [ ] 其他

### 🔗 相关 Issue

<!--
1. 描述相关需求的来源，如相关的 issue 讨论链接。
-->
https://github.com/Tencent/tdesign-vue-next/issues/5625

### 💡 需求背景和解决方案

<!--
1. 要解决的具体问题。
2. 列出最终的 API 实现和用法。
3. 涉及UI/交互变动需要有截图或 GIF。
-->

### 📝 更新日志

- [ ] 本条 PR 不需要纳入 Changelog

#### tdesign-vue-next
<!--
- feat(组件名称): 处理问题或特性描述
--> 

#### @tdesign-vue-next/chat
<!--
- feat(组件名称): 处理问题或特性描述
--> 

### ☑️ 请求合并前的自查清单

⚠️ 请自检并全部**勾选全部选项**。⚠️

- [ ] 文档已补充或无须补充
- [ ] 代码演示已提供或无须提供
- [ ] TypeScript 定义已补充或无须补充
- [ ] Changelog 已提供或无须提供


tdesign-bot: # TDesign Component Site Preview [Open](https://github.com/Tencent/tdesign-vue-next/actions/runs/16211239030)
  | Component | Preview |
  | --------- | :--: |
  | tdesign-vue-next | [<img width="300" alt="完成" src="https://user-images.githubusercontent.com/15634204/150816437-9f5bb788-cd67-4cbc-9897-b82d74e9aa65.png" />](https://preview-pr-5728-tdesign-vue-next.surge.sh) | 
| @tdesign-vue-next/chat | [<img width="300" alt="完成" src="https://user-images.githubusercontent.com/15634204/150816437-9f5bb788-cd67-4cbc-9897-b82d74e9aa65.png" />](https://preview-pr-5728-tdesign-vue-next-chat.surge.sh) | 

  <!-- AUTO_PREVIEW_HOOK -->
<!-- AUTO_PREVIEW_HOOK -->
pkg-pr-new[bot]: 
[tdesign-vue-next-demo](https://pkg.pr.new/template/4b349244-91ac-4e6e-9eca-dd91e4e41d0f)


```
npm i https://pkg.pr.new/Tencent/tdesign-vue-next@5728
```


```
npm i https://pkg.pr.new/Tencent/tdesign-vue-next/@tdesign-vue-next/chat@5728
```


_commit: <a href="https://github.com/Tencent/tdesign-vue-next/runs/45771691136"><code>9b89c2e</code></a>_


Patch:
diff --git a/.github/workflows/project-issue-trigger.yml b/.github/workflows/project-issue-trigger.yml
new file mode 100644
index 000000000..4bf99f374
--- /dev/null
+++ b/.github/workflows/project-issue-trigger.yml
@@ -0,0 +1,16 @@
+# https://github.com/TDesignOteam/tdesign-projects-action
+
+name: project-issue-trigger
+on:
+  issues:
+    types: [opened, closed]
+jobs:
+  project-issue-trigger:
+    runs-on: ubuntu-latest
+    steps:
+      - name: issue to project
+        uses: TDesignOteam/tdesign-projects-action@main
+        env:
+          GH_TOKEN: ${{ secrets.TDESIGN_BOT_TOKEN }}
+          PROJECT_TYPE: ISSUE2TRIGGER
+          PROJECT_ID: 1
diff --git a/.github/workflows/project-label-trigger.yml b/.github/workflows/project-label-trigger.yml
new file mode 100644
index 000000000..bca7c39e2
--- /dev/null
+++ b/.github/workflows/project-label-trigger.yml
@@ -0,0 +1,18 @@
+# https://github.com/TDesignOteam/tdesign-projects-action
+
+name: projects-label-trigger
+
+on:
+  issues:
+    types: [labeled, unlabeled]
+
+jobs:
+  projects-label-trigger:
+    runs-on: ubuntu-latest
+    steps:
+      - name: label to project
+        uses: TDesignOteam/tdesign-projects-action@main
+        env:
+          GH_TOKEN: ${{ secrets.TDESIGN_BOT_TOKEN }}
+          PROJECT_TYPE: LABEL2TRIGGER
+          PROJECT_ID: 1
diff --git a/.github/workflows/project-pr-trigger.yml b/.github/workflows/project-pr-trigger.yml
new file mode 100644
index 000000000..9614b1a06
--- /dev/null
+++ b/.github/workflows/project-pr-trigger.yml
@@ -0,0 +1,18 @@
+# https://github.com/TDesignOteam/tdesign-projects-action
+
+name: project-pr-trigger
+
+on:
+  pull_request_target:
+    types: [opened, reopened, closed]
+
+jobs:
+  project-pr-trigger:
+    runs-on: ubuntu-latest
+    steps:
+      - name: pr to project
+        uses: TDesignOteam/tdesign-projects-action@main
+        env:
+          GH_TOKEN: ${{ secrets.TDESIGN_BOT_TOKEN }}
+          PROJECT_TYPE: PR2TRIGGER
+          PROJECT_ID: 1
diff --git a/packages/common b/packages/common
index d56150f2e..a27c913bc 160000
--- a/packages/common
+++ b/packages/common
@@ -1,1 +1,1 @@
-Subproject commit d56150f2ee85c87fcd26710a0c3fb599ecd78183
+Subproject commit a27c913bc6ae659038e58974549cf6f669b78806
diff --git a/packages/components/components.ts b/packages/components/components.ts
index e2db45e9b..dfaec9e7e 100644
--- a/packages/components/components.ts
+++ b/packages/components/components.ts
@@ -67,6 +67,7 @@ export * from './collapse';
 export * from './watermark';
 export * from './rate';
 export * from './typography';
+export * from './qrcode';
 // 消息提醒
 
 export * from './alert';
diff --git a/packages/components/config-provider/config-provider.en-US.md b/packages/components/config-provider/config-provider.en-US.md
index 5ee843133..c9c8419f1 100644
--- a/packages/components/config-provider/config-provider.en-US.md
+++ b/packages/components/config-provider/config-provider.en-US.md
@@ -89,6 +89,7 @@ list | Object | - | List global configs。Typescript：`ListConfig` | N
 message | Object | - | Message Component global configs。Typescript：`MessageConfig` | N
 pagination | Object | - | Pagination global configs。Typescript：`PaginationConfig` | N
 popconfirm | Object | - | Popconfirm global configs。Typescript：`PopconfirmConfig` | N
+qrcode | Object | - | QRCode global configs。Typescript：`QRCodeConfig` | N
 rate | Object | - | Rate global configs。Typescript：`RateConfig` | N
 select | Object | - | Select global configs。Typescript：`SelectConfig` | N
 steps | Object | - | Steps global configs。Typescript：`StepsConfig` | N
@@ -289,6 +290,14 @@ cancel | String / Object | - | Typescript：`string \| ButtonProps`，[Button AP
 confirm | String / Object | - | Typescript：`string \| ButtonProps` | N
 confirmBtnTheme | Object | - | Typescript：`{ default: string; warning: string; danger: string; }` | N
 
+### QRCodeConfig
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+expiredText | String | - | Language configuration, "QR code expired" description text | N
+refreshText | String | - | Language configuration, "QR code refresh" description text | N
+scannedText | String | - | Language configuration, "QR code scanned" description text | N
+
 ### RateConfig
 
 name | type | default | description | required
diff --git a/packages/components/config-provider/config-provider.md b/packages/components/config-provider/config-provider.md
index 099863e74..f2b8dbc06 100644
--- a/packages/components/config-provider/config-provider.md
+++ b/packages/components/config-provider/config-provider.md
@@ -90,6 +90,7 @@ list | Object | - | 列表组件全局配置。TS 类型：`ListConfig` | N
 message | Object | - | 消息组件全局配置。TS 类型：`MessageConfig` | N
 pagination | Object | - | 分页组件全局配置。TS 类型：`PaginationConfig` | N
 popconfirm | Object | - | 气泡确认框全局配置。TS 类型：`PopconfirmConfig` | N
+qrcode | Object | - | 二维码全局配置。TS 类型：`QRCodeConfig` | N
 rate | Object | - | 评分全局配置。TS 类型：`RateConfig` | N
 select | Object | - | 选择器组件全局配置。TS 类型：`SelectConfig` | N
 steps | Object | - | 步骤条组件全局配置。TS 类型：`StepsConfig` | N
@@ -290,6 +291,14 @@ cancel | String / Object | - | 语言配置，“取消”描述文本。TS 类
 confirm | String / Object | - | 语言配置，“确定”描述文本。TS 类型：`string \| ButtonProps` | N
 confirmBtnTheme | Object | - | 确认按钮主题色，即 Popconfirm 的 `theme` 和 确认按钮的 `theme` 映射关系。示例：{ danger: 'danger' }。TS 类型：`{ default: string; warning: string; danger: string; }` | N
 
+### QRCodeConfig
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+expiredText | String | - | 语言配置，“二维码过期”描述文本 | N
+refreshText | String | - | 语言配置，“点击刷新”描述文本 | N
+scannedText | String | - | 语言配置，“已扫描”描述文本 | N
+
 ### RateConfig
 
 名称 | 类型 | 默认值 | 描述 | 必传
diff --git a/packages/components/config-provider/type.ts b/packages/components/config-provider/type.ts
index 3fe8b9bd5..eee886a56 100644
--- a/packages/components/config-provider/type.ts
+++ b/packages/components/config-provider/type.ts
@@ -118,6 +118,10 @@ export interface GlobalConfigProvider {
    * 气泡确认框全局配置
    */
   popconfirm?: PopconfirmConfig;
+  /**
+   * 二维码全局配置
+   */
+  qrcode?: QRCodeConfig;
   /**
    * 评分全局配置
    */
@@ -720,6 +724,24 @@ export interface PopconfirmConfig {
   confirmBtnTheme?: { default: string; warning: string; danger: string };
 }
 
+export interface QRCodeConfig {
+  /**
+   * 语言配置，“二维码过期”描述文本
+   * @default ''
+   */
+  expiredText?: string;
+  /**
+   * 语言配置，“点击刷新”描述文本
+   * @default ''
+   */
+  refreshText?: string;
+  /**
+   * 语言配置，“已扫描”描述文本
+   * @default ''
+   */
+  scannedText?: string;
+}
+
 export interface RateConfig {
   /**
    * 评分描述，默认值：['极差', '失望', '一般', '满意', '惊喜']
diff --git a/packages/components/date-picker/DatePicker.tsx b/packages/components/date-picker/DatePicker.tsx
index a6615e5ca..f73d68799 100644
--- a/packages/components/date-picker/DatePicker.tsx
+++ b/packages/components/date-picker/DatePicker.tsx
@@ -196,6 +196,11 @@ export default defineComponent({
     }
 
     function onTagRemoveClick(ctx: TagInputRemoveContext) {
+      if (['week', 'quarter'].includes(props.mode)) {
+        onChange?.(ctx.value, { trigger: 'tag-remove' });
+        return;
+      }
+
       const removeDate = dayjs(ctx.item).toDate();
       const newDate = processDate(removeDate);
       onChange?.(newDate, {
diff --git a/packages/components/dialog/dialog.md b/packages/components/dialog/dialog.md
index 3b2bf5eb5..ac8c70e8f 100644
--- a/packages/components/dialog/dialog.md
+++ b/packages/components/dialog/dialog.md
@@ -70,6 +70,16 @@
 
 如果您不确定问题是否是由该规则引起的，或者确定该规则不是问题的根本原因，请在 `GitHub` 上提出一个 `issue`，并提供可以重现问题的代码。这将有助于我们更好地了解您的问题并提供更好的帮助。
 
+### 多层 Dialog 嵌套时，外层 Dialog 开启 destroy-on-close 后出现异常的情况？
+
+使用嵌套多层使用 dialog 且最外层开启了 `destroy-on-close` ，会出现框架层的报错：
+
+> Uncaught (in promise) NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
+
+解决方法： 除最后一层 dialog，外层的所有 dialog 都设置 `lazy` 为`true`；
+
+详情见 [issue](https://github.com/Tencent/tdesign-vue-next/pull/5659)，可通过此[链接](https://stackblitz.com/edit/vitejs-vite-vnywg115?file=src%2FApp.vue)体验。
+
 ## API
 
 ### DialogCard Props
diff --git a/packages/components/input-adornment/input-adornment.tsx b/packages/components/input-adornment/input-adornment.tsx
index 79f8354c6..00efc4ad8 100644
--- a/packages/components/input-adornment/input-adornment.tsx
+++ b/packages/components/input-adornment/input-adornment.tsx
@@ -7,7 +7,6 @@ import props from './props';
 
 export default defineComponent({
   name: 'TInputAdornment',
-  inheritAttrs: false,
   props,
   setup(props, { slots }) {
     const COMPONENT_NAME = usePrefixClass('input-adornment');
diff --git a/packages/components/pagination/pagination-mini.tsx b/packages/components/pagination/pagination-mini.tsx
index 52582eaf6..808315fe0 100644
--- a/packages/components/pagination/pagination-mini.tsx
+++ b/packages/components/pagination/pagination-mini.tsx
@@ -12,6 +12,7 @@ import props from './pagination-mini-props';
 import { useGlobalIcon, usePrefixClass } from '@tdesign/shared-hooks';
 
 import TButton from '../button';
+import TTooltip from '../tooltip';
 
 export default defineComponent({
   name: 'TPaginationMini',
@@ -46,6 +47,15 @@ export default defineComponent({
       return { prev: false, current: false, next: false };
     });
 
+    const renderWithTooltip = (content: string | undefined, node: JSX.Element) => {
+      if (!content) return node;
+      return (
+        <TTooltip content={content} showArrow={false}>
+          {node}
+        </TTooltip>
+      );
+    };
+
     return () => {
       const jumperClass = [
         COMPONENT_NAME.value,
@@ -56,40 +66,45 @@ export default defineComponent({
 
       return (
         <div class={jumperClass}>
-          <TButton
-            title={titleConfig.value.prev}
-            variant={props.variant}
-            size={props.size}
-            shape="square"
-            onClick={(e) => props.onChange?.({ e, trigger: 'prev' })}
-            icon={props.layout === 'horizontal' ? () => <ChevronLeftIcon /> : () => <ChevronUpIcon />}
-            class={`${COMPONENT_NAME.value}__prev`}
-            disabled={disabledConfig.value.prev}
-          />
-
-          {props.showCurrent && (
+          {renderWithTooltip(
+            titleConfig.value.prev,
             <TButton
-              title={titleConfig.value.current}
               variant={props.variant}
               size={props.size}
               shape="square"
-              onClick={(e) => props.onChange?.({ e, trigger: 'current' })}
-              icon={() => <RoundIcon />}
-              class={`${COMPONENT_NAME.value}__current`}
-              disabled={disabledConfig.value.current}
-            />
+              onClick={(e) => props.onChange?.({ e, trigger: 'prev' })}
+              icon={props.layout === 'horizontal' ? () => <ChevronLeftIcon /> : () => <ChevronUpIcon />}
+              class={`${COMPONENT_NAME.value}__prev`}
+              disabled={disabledConfig.value.prev}
+            />,
           )}
 
-          <TButton
-            title={titleConfig.value.next}
-            variant={props.variant}
-            size={props.size}
-            shape="square"
-            onClick={(e) => props.onChange?.({ e, trigger: 'next' })}
-            icon={props.layout === 'horizontal' ? () => <ChevronRightIcon /> : () => <ChevronDownIcon />}
-            class={`${COMPONENT_NAME.value}__next`}
-            disabled={disabledConfig.value.next}
-          />
+          {props.showCurrent &&
+            renderWithTooltip(
+              titleConfig.value.current,
+              <TButton
+                variant={props.variant}
+                size={props.size}
+                shape="square"
+                onClick={(e) => props.onChange?.({ e, trigger: 'current' })}
+                icon={() => <RoundIcon />}
+                class={`${COMPONENT_NAME.value}__current`}
+                disabled={disabledConfig.value.current}
+              />,
+            )}
+
+          {renderWithTooltip(
+            titleConfig.value.next,
+            <TButton
+              variant={props.variant}
+              size={props.size}
+              shape="square"
+              onClick={(e) => props.onChange?.({ e, trigger: 'next' })}
+              icon={props.layout === 'horizontal' ? () => <ChevronRightIcon /> : () => <ChevronDownIcon />}
+              class={`${COMPONENT_NAME.value}__next`}
+              disabled={disabledConfig.value.next}
+            />,
+          )}
         </div>
       );
     };
diff --git a/packages/components/qrcode/_example-ts/base.vue b/packages/components/qrcode/_example-ts/base.vue
new file mode 100644
index 000000000..602177a62
--- /dev/null
+++ b/packages/components/qrcode/_example-ts/base.vue
@@ -0,0 +1,13 @@
+<template>
+  <div style="width: 100%">
+    <t-space direction="vertical" align="center">
+      <t-qrcode :value="text || '-'" />
+      <t-input v-model="text" placeholder="-" />
+    </t-space>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+const text = ref('https://tdesign.tencent.com/');
+</script>
diff --git a/packages/components/qrcode/_example-ts/customColor.vue b/packages/components/qrcode/_example-ts/customColor.vue
new file mode 100644
index 000000000..e640babb7
--- /dev/null
+++ b/packages/components/qrcode/_example-ts/customColor.vue
@@ -0,0 +1,6 @@
+<template>
+  <t-space>
+    <t-qrcode value="https://tdesign.tencent.com/" color="#0052D9" bg-color="#fff" />
+    <t-qrcode value="https://tdesign.tencent.com/" color="#0052D9" bg-color="#D9E1FF" />
+  </t-space>
+</template>
diff --git a/packages/components/qrcode/_example-ts/customSize.vue b/packages/components/qrcode/_example-ts/customSize.vue
new file mode 100644
index 000000000..ec34c1107
--- /dev/null
+++ b/packages/components/qrcode/_example-ts/customSize.vue
@@ -0,0 +1,36 @@
+<template>
+  <t-space direction="vertical">
+    <t-space>
+      <t-button :disabled="size <= minSize" @click="size -= 10">
+        <template #icon>
+          <MinusIcon />
+        </template>
+        Smaller
+      </t-button>
+      <t-button :disabled="size >= maxSize" @click="size += 10">
+        <template #icon>
+          <AddIcon />
+        </template>
+        Larger
+      </t-button>
+    </t-space>
+    <t-qrcode
+      level="H"
+      :size="size"
+      :icon-size="size / 4"
+      value="https://tdesign.tencent.com/"
+      icon="https://tdesign.gtimg.com/site/tdesign-logo.png"
+    />
+  </t-space>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { MinusIcon, AddIcon } from 'tdesign-icons-vue-next';
+import { QRCodeProps } from 'tdesign-vue-next';
+
+const minSize = 40;
+const maxSize = 300;
+
+const size = ref<QRCodeProps['level']>(160);
+</script>
diff --git a/packages/components/qrcode/_example-ts/customStatusRender.vue b/packages/components/qrcode/_example-ts/customStatusRender.vue
new file mode 100644
index 000000000..b07378a14
--- /dev/null
+++ b/packages/components/qrcode/_example-ts/customStatusRender.vue
@@ -0,0 +1,70 @@
+<template>
+  <t-space>
+    <!-- 自定义状态-使用Function -->
+    <t-qrcode value="https://tdesign.tencent.com/" status="loading" :status-render="renderStatus" />
+    <!-- 自定义状态-使用插槽 -->
+    <t-qrcode value="https://tdesign.tencent.com/" status="expired">
+      <template #status-render="{ status }">
+        <div v-if="status === 'expired'" class="tdesign-demo-qrcode__status-render">
+          <p class="tdesign-demo-qrcode__status-render-title">
+            <CloseCircleFilledIcon size="16" />
+            <span>二维码过期</span>
+          </p>
+          <p class="tdesign-demo-qrcode__status-render-action" @click="handleRefresh">
+            <RefreshIcon size="16" />
+            <span>点击刷新</span>
+          </p>
+        </div>
+      </template>
+    </t-qrcode>
+    <!-- 默认状态 -->
+    <t-qrcode value="https://tdesign.tencent.com/" status="scanned" />
+  </t-space>
+</template>
+
+<script lang="tsx" setup>
+import { CloseCircleFilledIcon, RefreshIcon } from 'tdesign-icons-vue-next';
+import { QRCodeProps } from 'tdesign-vue-next';
+
+const renderStatus: QRCodeProps['statusRender'] = (_h, { status }) => {
+  return (
+    status === 'loading' && (
+      <t-space direction="vertical" size="4px">
+        <t-loading size="32px" />
+        <p>加载中...</p>
+      </t-space>
+    )
+  );
+};
+
+const handleRefresh: QRCodeProps['onRefresh'] = () => {
+  console.log('Click Refresh');
+};
+</script>
+
+<style>
+.tdesign-demo-qrcode__status-render {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.tdesign-demo-qrcode__status-render-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tdesign-demo-qrcode__status-render-title .t-icon {
+  color: var(--td-error-color);
+}
+
+.tdesign-demo-qrcode__status-render-action {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--td-brand-color);
+  cursor: pointer;
+  line-height: 32px;
+}
+</style>
diff --git a/packages/components/qrcode/_example-ts/download.vue b/packages/components/qrcode/_example-ts/download.vue
new file mode 100644
index 000000000..432ca2755
--- /dev/null
+++ b/packages/components/qrcode/_example-ts/download.vue
@@ -0,0 +1,58 @@
+<template>
+  <t-space direction="vertical">
+    <t-radio-group v-model="type" variant="default-filled">
+      <t-radio-button value="canvas">canvas</t-radio-button>
+      <t-radio-button value="svg">svg</t-radio-button>
+    </t-radio-group>
+    <t-qrcode
+      id="QRCode"
+      :type="type"
+      value="https://tdesign.tencent.com/"
+      icon="https://tdesign.gtimg.com/site/tdesign-logo.png"
+    />
+    <t-button @click="handleDownload">Download</t-button>
+  </t-space>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { QRCodeProps } from 'tdesign-vue-next';
+
+const type = ref<QRCodeProps['type']>('canvas');
+
+function downloadFile(url: string, fileName: string) {
+  const a = document.createElement('a');
+  a.download = fileName;
+  a.href = url;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+}
+
+const downloadCanvas = () => {
+  const canvas = document.getElementById('QRCode').querySelector('canvas');
+  if (canvas) {
+    const url = canvas.toDataURL();
+    console.log(url);
+    downloadFile(url, 'TDesign-QRCode.png');
+  }
+};
+
+const downloadSvg = () => {
+  const svg = document.getElementById('QRCode').querySelector('svg');
+  const svgData = new XMLSerializer().serializeToString(svg);
+  const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
+  const url = URL.createObjectURL(blob);
+  console.log(url);
+  downloadFile(url, 'TDesign-QRCode.svg');
+};
+
+const handleDownload = () => {
+  if (type.value === 'canvas') {
+    downloadCanvas();
+  }
+  if (type.value === 'svg') {
+    downloadSvg();
+  }
+};
+</script>
diff --git a/packages/components/qrcode/_example-ts/icon.vue b/packages/components/qrcode/_example-ts/icon.vue
new file mode 100644
index 000000000..92ed88e72
--- /dev/null
+++ b/packages/components/qrcode/_example-ts/icon.vue
@@ -0,0 +1,5 @@
+<template>
+  <div style="width: 100%">
+    <t-qrcode value="https://tdesign.tencent.com/" icon="https://tdesign.gtimg.com/site/tdesign-logo.png" />
+  </div>
+</template>
diff --git a/packages/components/qrcode/_example-ts/level.vue b/packages/components/qrcode/_example-ts/level.vue
new file mode 100644
index 000000000..505b2e9f4
--- /dev/null
+++ b/packages/components/qrcode/_example-ts/level.vue
@@ -0,0 +1,18 @@
+<template>
+  <t-space direction="vertical">
+    <t-radio-group v-model="level" variant="default-filled">
+      <t-radio-button value="L">L</t-radio-button>
+      <t-radio-button value="M">M</t-radio-button>
+      <t-radio-button value="Q">Q</t-radio-button>
+      <t-radio-button value="H">H</t-radio-button>
+    </t-radio-group>
+    <t-qrcode :level="level" value="https://tdesign.gtimg.com/site/tdesign-logo.png" />
+  </t-space>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { QRCodeProps } from 'tdesign-vue-next';
+
+const level = ref<QRCodeProps['level']>('M');
+</script>
diff --git a/packages/components/qrcode/_example-ts/popover.vue b/packages/components/qrcode/_example-ts/popover.vue
new file mode 100644
index 000000000..cb798aac0
--- /dev/null
+++ b/packages/components/qrcode/_example-ts/popover.vue
@@ -0,0 +1,15 @@
+<template>
+  <div style="width: 100%">
+    <t-popup trigger="hover">
+      <t-button>Hover me</t-button>
+      <template #content>
+        <t-qrcode
+          value="https://tdesign.tencent.com/"
+          :size="146"
+          borderless
+          style="padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-s)"
+        />
+      </template>
+    </t-popup>
+  </div>
+</template>
diff --git a/packages/components/qrcode/_example-ts/status.vue b/packages/components/qrcode/_example-ts/status.vue
new file mode 100644
index 000000000..f75c435a3
--- /dev/null
+++ b/packages/components/qrcode/_example-ts/status.vue
@@ -0,0 +1,7 @@
+<template>
+  <t-space>
+    <t-qrcode value="https://tdesign.tencent.com/" status="loading" />
+    <t-qrcode value="https://tdesign.tencent.com/" status="expired" :on-refresh="() => console.log('Click Refresh')" />
+    <t-qrcode value="https://tdesign.tencent.com/" status="scanned" />
+  </t-space>
+</template>
diff --git a/packages/components/qrcode/_example-ts/type.vue b/packages/components/qrcode/_example-ts/type.vue
new file mode 100644
index 000000000..aa637e5de
--- /dev/null
+++ b/packages/components/qrcode/_example-ts/type.vue
@@ -0,0 +1,6 @@
+<template>
+  <t-space>
+    <t-qrcode value="https://tdesign.tencent.com/" type="canvas" />
+    <t-qrcode value="https://tdesign.tencent.com/" type="svg" />
+  </t-space>
+</template>
diff --git a/packages/components/qrcode/_example/base.vue b/packages/components/qrcode/_example/base.vue
new file mode 100644
index 000000000..83598be2a
--- /dev/null
+++ b/packages/components/qrcode/_example/base.vue
@@ -0,0 +1,13 @@
+<template>
+  <div style="width: 100%">
+    <t-space direction="vertical" align="center">
+      <t-qrcode :value="text || '-'" />
+      <t-input v-model="text" placeholder="-" />
+    </t-space>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const text = ref('https://tdesign.tencent.com/');
+</script>
diff --git a/packages/components/qrcode/_example/customColor.vue b/packages/components/qrcode/_example/customColor.vue
new file mode 100644
index 000000000..e640babb7
--- /dev/null
+++ b/packages/components/qrcode/_example/customColor.vue
@@ -0,0 +1,6 @@
+<template>
+  <t-space>
+    <t-qrcode value="https://tdesign.tencent.com/" color="#0052D9" bg-color="#fff" />
+    <t-qrcode value="https://tdesign.tencent.com/" color="#0052D9" bg-color="#D9E1FF" />
+  </t-space>
+</template>
diff --git a/packages/components/qrcode/_example/customSize.vue b/packages/components/qrcode/_example/customSize.vue
new file mode 100644
index 000000000..cb4f95991
--- /dev/null
+++ b/packages/components/qrcode/_example/customSize.vue
@@ -0,0 +1,35 @@
+<template>
+  <t-space direction="vertical">
+    <t-space>
+      <t-button :disabled="size <= minSize" @click="size -= 10">
+        <template #icon>
+          <MinusIcon />
+        </template>
+        Smaller
+      </t-button>
+      <t-button :disabled="size >= maxSize" @click="size += 10">
+        <template #icon>
+          <AddIcon />
+        </template>
+        Larger
+      </t-button>
+    </t-space>
+    <t-qrcode
+      level="H"
+      :size="size"
+      :icon-size="size / 4"
+      value="https://tdesign.tencent.com/"
+      icon="https://tdesign.gtimg.com/site/tdesign-logo.png"
+    />
+  </t-space>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { MinusIcon, AddIcon } from 'tdesign-icons-vue-next';
+
+const minSize = 40;
+const maxSize = 300;
+
+const size = ref(160);
+</script>
diff --git a/packages/components/qrcode/_example/customStatusRender.vue b/packages/components/qrcode/_example/customStatusRender.vue
new file mode 100644
index 000000000..51297ee8f
--- /dev/null
+++ b/packages/components/qrcode/_example/customStatusRender.vue
@@ -0,0 +1,69 @@
+<template>
+  <t-space>
+    <!-- 自定义状态-使用Function -->
+    <t-qrcode value="https://tdesign.tencent.com/" status="loading" :status-render="renderStatus" />
+    <!-- 自定义状态-使用插槽 -->
+    <t-qrcode value="https://tdesign.tencent.com/" status="expired">
+      <template #status-render="{ status }">
+        <div v-if="status === 'expired'" class="tdesign-demo-qrcode__status-render">
+          <p class="tdesign-demo-qrcode__status-render-title">
+            <CloseCircleFilledIcon size="16" />
+            <span>二维码过期</span>
+          </p>
+          <p class="tdesign-demo-qrcode__status-render-action" @click="handleRefresh">
+            <RefreshIcon size="16" />
+            <span>点击刷新</span>
+          </p>
+        </div>
+      </template>
+    </t-qrcode>
+    <!-- 默认状态 -->
+    <t-qrcode value="https://tdesign.tencent.com/" status="scanned" />
+  </t-space>
+</template>
+
+<script lang="jsx" setup>
+import { CloseCircleFilledIcon, RefreshIcon } from 'tdesign-icons-vue-next';
+
+const renderStatus = (_h, { status }) => {
+  return (
+    status === 'loading' && (
+      <t-space direction="vertical" size="4px">
+        <t-loading size="32px" />
+        <p>加载中...</p>
+      </t-space>
+    )
+  );
+};
+
+const handleRefresh = () => {
+  console.log('Click Refresh');
+};
+</script>
+
+<style>
+.tdesign-demo-qrcode__status-render {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.tdesign-demo-qrcode__status-render-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tdesign-demo-qrcode__status-render-title .t-icon {
+  color: var(--td-error-color);
+}
+
+.tdesign-demo-qrcode__status-render-action {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--td-brand-color);
+  cursor: pointer;
+  line-height: 32px;
+}
+</style>
diff --git a/packages/components/qrcode/_example/download.vue b/packages/components/qrcode/_example/download.vue
new file mode 100644
index 000000000..93acfda36
--- /dev/null
+++ b/packages/components/qrcode/_example/download.vue
@@ -0,0 +1,57 @@
+<template>
+  <t-space direction="vertical">
+    <t-radio-group v-model="type" variant="default-filled">
+      <t-radio-button value="canvas">canvas</t-radio-button>
+      <t-radio-button value="svg">svg</t-radio-button>
+    </t-radio-group>
+    <t-qrcode
+      id="QRCode"
+      :type="type"
+      value="https://tdesign.tencent.com/"
+      icon="https://tdesign.gtimg.com/site/tdesign-logo.png"
+    />
+    <t-button @click="handleDownload">Download</t-button>
+  </t-space>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const type = ref('canvas');
+
+function downloadFile(url, fileName) {
+  const a = document.createElement('a');
+  a.download = fileName;
+  a.href = url;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+}
+
+const downloadCanvas = () => {
+  const canvas = document.getElementById('QRCode').querySelector('canvas');
+  if (canvas) {
+    const url = canvas.toDataURL();
+    console.log(url);
+    downloadFile(url, 'TDesign-QRCode.png');
+  }
+};
+
+const downloadSvg = () => {
+  const svg = document.getElementById('QRCode').querySelector('svg');
+  const svgData = new XMLSerializer().serializeToString(svg);
+  const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
+  const url = URL.createObjectURL(blob);
+  console.log(url);
+  downloadFile(url, 'TDesign-QRCode.svg');
+};
+
+const handleDownload = () => {
+  if (type.value === 'canvas') {
+    downloadCanvas();
+  }
+  if (type.value === 'svg') {
+    downloadSvg();
+  }
+};
+</script>
diff --git a/packages/components/qrcode/_example/icon.vue b/packages/components/qrcode/_example/icon.vue
new file mode 100644
index 000000000..92ed88e72
--- /dev/null
+++ b/packages/components/qrcode/_example/icon.vue
@@ -0,0 +1,5 @@
+<template>
+  <div style="width: 100%">
+    <t-qrcode value="https://tdesign.tencent.com/" icon="https://tdesign.gtimg.com/site/tdesign-logo.png" />
+  </div>
+</template>
diff --git a/packages/components/qrcode/_example/level.vue b/packages/components/qrcode/_example/level.vue
new file mode 100644
index 000000000..8653bab2f
--- /dev/null
+++ b/packages/components/qrcode/_example/level.vue
@@ -0,0 +1,17 @@
+<template>
+  <t-space direction="vertical">
+    <t-radio-group v-model="level" variant="default-filled">
+      <t-radio-button value="L">L</t-radio-button>
+      <t-radio-button value="M">M</t-radio-button>
+      <t-radio-button value="Q">Q</t-radio-button>
+      <t-radio-button value="H">H</t-radio-button>
+    </t-radio-group>
+    <t-qrcode :level="level" value="https://tdesign.gtimg.com/site/tdesign-logo.png" />
+  </t-space>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const level = ref('M');
+</script>
diff --git a/packages/components/qrcode/_example/popover.vue b/packages/components/qrcode/_example/popover.vue
new file mode 100644
index 000000000..cb798aac0
--- /dev/null
+++ b/packages/components/qrcode/_example/popover.vue
@@ -0,0 +1,15 @@
+<template>
+  <div style="width: 100%">
+    <t-popup trigger="hover">
+      <t-button>Hover me</t-button>
+      <template #content>
+        <t-qrcode
+          value="https://tdesign.tencent.com/"
+          :size="146"
+          borderless
+          style="padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-s)"
+        />
+      </template>
+    </t-popup>
+  </div>
+</template>
diff --git a/packages/components/qrcode/_example/status.vue b/packages/components/qrcode/_example/status.vue
new file mode 100644
index 000000000..f75c435a3
--- /dev/null
+++ b/packages/components/qrcode/_example/status.vue
@@ -0,0 +1,7 @@
+<template>
+  <t-space>
+    <t-qrcode value="https://tdesign.tencent.com/" status="loading" />
+    <t-qrcode value="https://tdesign.tencent.com/" status="expired" :on-refresh="() => console.log('Click Refresh')" />
+    <t-qrcode value="https://tdesign.tencent.com/" status="scanned" />
+  </t-space>
+</template>
diff --git a/packages/components/qrcode/_example/type.vue b/packages/components/qrcode/_example/type.vue
new file mode 100644
index 000000000..aa637e5de
--- /dev/null
+++ b/packages/components/qrcode/_example/type.vue
@@ -0,0 +1,6 @@
+<template>
+  <t-space>
+    <t-qrcode value="https://tdesign.tencent.com/" type="canvas" />
+    <t-qrcode value="https://tdesign.tencent.com/" type="svg" />
+  </t-space>
+</template>
diff --git a/packages/components/qrcode/_usage/index.vue b/packages/components/qrcode/_usage/index.vue
new file mode 100644
index 000000000..b2dd2975e
--- /dev/null
+++ b/packages/components/qrcode/_usage/index.vue
@@ -0,0 +1,30 @@
+<!-- 该脚本为自动生成，如有需要请在 /script/generate-usage/index.js 中调整 -->
+<template>
+  <base-usage :code="usageCode" :config-list="configList" :panel-list="panelList" @panel-change="onPanelChange">
+    <template #qrcode="{ configProps }">
+      <t-qrcode value="https://tdesign.gtimg.com/site/tdesign-logo.png" v-bind="configProps" />
+    </template>
+  </base-usage>
+</template>
+
+<script setup lang="jsx">
+/* eslint-disable */
+import { ref, onMounted } from 'vue';
+import configJson from './props.json';
+
+const configList = ref(configJson);
+const panelList = [{ label: 'QRCode', value: 'qrcode' }];
+
+const usageCodeMap = {
+  qrcode: '<t-qrcode value="https://tdesign.gtimg.com/site/tdesign-logo.png" v-bind="configProps"/>',
+};
+const usageCode = ref(`<template>${usageCodeMap[panelList[0].value].trim()}</template>`);
+
+function onPanelChange(panel) {
+  usageCode.value = `<template>${usageCodeMap[panel].trim()}</template>`;
+}
+
+onMounted(() => {
+  console.log();
+});
+</script>
diff --git a/packages/components/qrcode/_usage/props.json b/packages/components/qrcode/_usage/props.json
new file mode 100644
index 000000000..a407f360a
--- /dev/null
+++ b/packages/components/qrcode/_usage/props.json
@@ -0,0 +1,69 @@
+[
+  {
+    "name": "borderless",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
+  {
+    "name": "level",
+    "type": "enum",
+    "defaultValue": "M",
+    "options": [
+      {
+        "label": "L",
+        "value": "L"
+      },
+      {
+        "label": "M",
+        "value": "M"
+      },
+      {
+        "label": "Q",
+        "value": "Q"
+      },
+      {
+        "label": "H",
+        "value": "H"
+      }
+    ]
+  },
+  {
+    "name": "status",
+    "type": "enum",
+    "defaultValue": "active",
+    "options": [
+      {
+        "label": "active",
+        "value": "active"
+      },
+      {
+        "label": "expired",
+        "value": "expired"
+      },
+      {
+        "label": "loading",
+        "value": "loading"
+      },
+      {
+        "label": "scanned",
+        "value": "scanned"
+      }
+    ]
+  },
+  {
+    "name": "type",
+    "type": "enum",
+    "defaultValue": "canvas",
+    "options": [
+      {
+        "label": "canvas",
+        "value": "canvas"
+      },
+      {
+        "label": "svg",
+        "value": "svg"
+      }
+    ]
+  }
+]
\ No newline at end of file
diff --git a/packages/components/qrcode/components/props.ts b/packages/components/qrcode/components/props.ts
new file mode 100644
index 000000000..0ca9577e6
--- /dev/null
+++ b/packages/components/qrcode/components/props.ts
@@ -0,0 +1,117 @@
+import { PropType } from 'vue';
+import { QRCodeSubComponent, QRCodeStatus } from './type';
+
+export const QRCodeSubComponentProps = {
+  /**
+   * The value to encode into the QR Code. An array of strings can be passed in
+   * to represent multiple segments to further optimize the QR Code.
+   */
+  value: {
+    type: String,
+    default: '',
+  },
+  /**
+   * The size, in pixels, to render the QR Code.
+   * @defaultValue 128
+   */
+  size: {
+    type: Number,
+    default: 128,
+  },
+  /**
+   * The Error Correction Level to use.
+   * @see https://www.qrcode.com/en/about/error_correction.html
+   * @defaultValue L
+   */
+  level: {
+    type: String as PropType<QRCodeSubComponent['level']>,
+    default: 'L',
+  },
+  /**
+   * The background color used to render the QR Code.
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+   * @defaultValue #FFFFFF
+   */
+  bgColor: {
+    type: String,
+    default: '#FFFFFF',
+  },
+  /**
+   * The foregtound color used to render the QR Code.
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+   * @defaultValue #000000
+   */
+  fgColor: {
+    type: String,
+    default: '#000000',
+  },
+  /**
+   * The style to apply to the QR Code.
+   */
+  style: {
+    type: Object as PropType<QRCodeSubComponent['style']>,
+    default: () => ({} as QRCodeSubComponent['style']),
+  },
+  /**
+   * Whether or not a margin of 4 modules should be rendered as a part of the
+   * QR Code.
+   * @deprecated Use `marginSize` instead.
+   * @defaultValue false
+   */
+  includeMargin: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * The number of _modules_ to use for margin. The QR Code specification
+   * requires `4`, however you can specify any number. Values will be turned to
+   * integers with `Math.floor`. Overrides `includeMargin` when both are specified.
+   * @defaultValue 0
+   */
+  marginSize: {
+    type: Number,
+    default: 0,
+  },
+  /**
+   * The settings for the embedded image.
+   */
+  imageSettings: {
+    type: Object as PropType<QRCodeSubComponent['imageSettings']>,
+    default: () => ({}),
+  },
+  /**
+   * The title to assign to the QR Code. Used for accessibility reasons.
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * The minimum version used when encoding the QR Code. Valid values are 1-40
+   * with higher values resulting in more complex QR Codes. The optimal
+   * (lowest) version is determined for the `value` provided, using `minVersion`
+   * as the lower bound.
+   * @defaultValue 1
+   */
+  minVersion: {
+    type: Number,
+    default: 1,
+  },
+};
+
+export const QRCodeStatusProps = {
+  locale: {
+    type: Object as PropType<QRCodeStatus['locale']>,
+    default: () => ({} as QRCodeStatus['locale']),
+  },
+  onRefresh: {
+    type: Function as PropType<QRCodeStatus['onRefresh']>,
+  },
+  statusRender: {
+    type: Function as PropType<QRCodeStatus['statusRender']>,
+  },
+  status: {
+    type: String as PropType<QRCodeStatus['status']>,
+    default: 'active' as QRCodeStatus['status'],
+  },
+};
diff --git a/packages/components/qrcode/components/qrcode-canvas.tsx b/packages/components/qrcode/components/qrcode-canvas.tsx
new file mode 100644
index 000000000..5e1d567da
--- /dev/null
+++ b/packages/components/qrcode/components/qrcode-canvas.tsx
@@ -0,0 +1,123 @@
+import { computed, defineComponent, ref, watchEffect, onMounted } from 'vue';
+import { QRCodeSubComponentProps } from './props';
+import {
+  DEFAULT_NEED_MARGIN,
+  DEFAULT_MINVERSION,
+  isSupportPath2d,
+  excavateModules,
+  generatePath,
+} from '@tdesign/common-js/qrcode/utils';
+import { useQRCode } from '../hooks/useQRCode';
+
+export default defineComponent({
+  name: 'QRCodeCanvas',
+  props: QRCodeSubComponentProps,
+  setup(props) {
+    const imgSrc = computed(() => props.imageSettings?.src);
+
+    const imageRef = ref<HTMLImageElement>(null);
+
+    const canvasRef = ref<HTMLCanvasElement>(null);
+
+    const imgCrossOrigin = ref('');
+
+    const renderQRCode = () => {
+      const { margin, cells, numCells, calculatedImageSettings } = useQRCode({
+        value: props.value,
+        level: props.level,
+        minVersion: DEFAULT_MINVERSION,
+        includeMargin: DEFAULT_NEED_MARGIN,
+        marginSize: props.marginSize,
+        imageSettings: props.imageSettings,
+        size: props.size,
+      });
+
+      if (!canvasRef.value) {
+        return;
+      }
+
+      const canvas = canvasRef.value;
+      const ctx = canvas.getContext('2d');
+
+      if (!ctx) {
+        return;
+      }
+
+      imgCrossOrigin.value = calculatedImageSettings.value?.crossOrigin;
+
+      let cellsToDraw = cells;
+      const image = imageRef.value;
+
+      if (image) {
+        image.crossOrigin = calculatedImageSettings.value.crossOrigin;
+      }
+
+      const haveImageToRender =
+        calculatedImageSettings.value &&
+        image !== null &&
+        image.complete &&
+        image.naturalHeight !== 0 &&
+        image.naturalWidth !== 0;
+
+      if (haveImageToRender && calculatedImageSettings.value.excavation != null) {
+        cellsToDraw = computed(() => excavateModules(cells.value, calculatedImageSettings.value.excavation));
+      }
+
+      const pixelRatio = window.devicePixelRatio || 1;
+      canvas.height = props.size * pixelRatio;
+      canvas.width = props.size * pixelRatio;
+      const scale = (props.size / numCells.value) * pixelRatio;
+      ctx.scale(scale, scale);
+
+      ctx.fillStyle = props.bgColor;
+      ctx.fillRect(0, 0, numCells.value, numCells.value);
+
+      ctx.fillStyle = props.fgColor;
+      if (isSupportPath2d) {
+        ctx.fill(new Path2D(generatePath(cellsToDraw.value, margin.value)));
+      } else {
+        cells.value.forEach((row, rdx) => {
+          row.forEach((cell, cdx) => {
+            if (cell) {
+              ctx.fillRect(cdx + margin.value, rdx + margin.value, 1, 1);
+            }
+          });
+        });
+      }
+
+      if (calculatedImageSettings) {
+        ctx.globalAlpha = calculatedImageSettings.value.opacity;
+      }
+
+      if (haveImageToRender) {
+        ctx.globalAlpha = calculatedImageSettings.value.opacity;
+        ctx.drawImage(
+          image,
+          calculatedImageSettings.value.x + margin.value,
+          calculatedImageSettings.value.y + margin.value,
+          calculatedImageSettings.value.w,
+          calculatedImageSettings.value.h,
+        );
+      }
+    };
+
+    watchEffect(() => {
+      renderQRCode();
+    });
+
+    onMounted(() => {
+      renderQRCode();
+    });
+
+    return () => {
+      return (
+        <>
+          <canvas ref={canvasRef} role="img" />
+          {imgSrc.value != null ? (
+            <img ref={imageRef} onLoad={renderQRCode} style={{ display: 'none' }} src={imgSrc.value} />
+          ) : null}
+        </>
+      );
+    };
+  },
+});
diff --git a/packages/components/qrcode/components/qrcode-status.tsx b/packages/components/qrcode/components/qrcode-status.tsx
new file mode 100644
index 000000000..561f4b2e0
--- /dev/null
+++ b/packages/components/qrcode/components/qrcode-status.tsx
@@ -0,0 +1,60 @@
+import { computed, defineComponent } from 'vue';
+import { QRCodeStatusProps } from './props';
+import { CheckCircleFilledIcon, RefreshIcon } from 'tdesign-icons-vue-next';
+import Loading from '../../loading';
+import type { StatusRenderInfo } from '../type';
+import { usePrefixClass } from '@tdesign/shared-hooks';
+
+export default defineComponent({
+  name: 'QRCodeStatus',
+  props: QRCodeStatusProps,
+  setup(props) {
+    const classPrefix = usePrefixClass();
+
+    const defaultSpin = <Loading size="32px" />;
+
+    const defaultExpiredNode = computed(() => (
+      <>
+        <p class={`${classPrefix.value}-expired__text`}>{props.locale?.expiredText}</p>
+        {props?.onRefresh && (
+          <p class={`${classPrefix.value}-expired__button`} onClick={props?.onRefresh}>
+            <RefreshIcon size="16" />
+            {props.locale?.refreshText}
+          </p>
+        )}
+      </>
+    ));
+
+    const defaultScannedNode = (
+      <p class={`${classPrefix.value}-scanned`}>
+        <CheckCircleFilledIcon size="16" class={`${classPrefix.value}-scanned__icon`} />
+        {props.locale?.scannedText}
+      </p>
+    );
+
+    const defaultNodes = computed(() => {
+      return {
+        expired: defaultExpiredNode.value,
+        loading: defaultSpin,
+        scanned: defaultScannedNode,
+        active: null as any,
+      };
+    });
+
+    const renderStatus = (info: StatusRenderInfo) => {
+      return defaultNodes.value[info.status];
+    };
+
+    return () => {
+      return (
+        <>
+          {props.statusRender ||
+            renderStatus({
+              status: props.status,
+              onRefresh: props.onRefresh,
+            })}
+        </>
+      );
+    };
+  },
+});
diff --git a/packages/components/qrcode/components/qrcode-svg.tsx b/packages/components/qrcode/components/qrcode-svg.tsx
new file mode 100644
index 000000000..071c25c20
--- /dev/null
+++ b/packages/components/qrcode/components/qrcode-svg.tsx
@@ -0,0 +1,65 @@
+import { computed, defineComponent } from 'vue';
+import { QRCodeSubComponentProps } from './props';
+import {
+  DEFAULT_NEED_MARGIN,
+  DEFAULT_MINVERSION,
+  excavateModules,
+  generatePath,
+} from '@tdesign/common-js/qrcode/utils';
+import { useQRCode } from '../hooks/useQRCode';
+
+export default defineComponent({
+  name: 'QRCodeSVG',
+  props: QRCodeSubComponentProps,
+  setup(props) {
+    const { margin, cells, numCells, calculatedImageSettings } = useQRCode({
+      value: props.value,
+      level: props.level,
+      minVersion: DEFAULT_MINVERSION,
+      includeMargin: DEFAULT_NEED_MARGIN,
+      marginSize: props.marginSize,
+      imageSettings: props.imageSettings,
+      size: props.size,
+    });
+
+    const cellsToDraw = computed(() => {
+      if (props.imageSettings && calculatedImageSettings.value?.excavation != null) {
+        return excavateModules(cells.value, calculatedImageSettings.value.excavation);
+      }
+      return cells.value;
+    });
+
+    const imageNode = computed(() => {
+      if (!props.imageSettings || !calculatedImageSettings.value) return null;
+
+      return (
+        <image
+          href={props.imageSettings.src}
+          height={calculatedImageSettings.value.h}
+          width={calculatedImageSettings.value.w}
+          x={calculatedImageSettings.value.x + margin.value}
+          y={calculatedImageSettings.value.y + margin.value}
+          crossOrigin={calculatedImageSettings.value.crossOrigin}
+        />
+      );
+    });
+
+    return () => {
+      const fgPath = generatePath(cellsToDraw.value, margin.value);
+      return (
+        <svg
+          height={props.size}
+          width={props.size}
+          viewBox={`0 0 ${numCells.value} ${numCells.value}`}
+          role="img"
+          style={props.style}
+        >
+          {!!props.title && <title>{props.title}</title>}
+          <path fill={props.bgColor} d={`M0,0 h${numCells.value}v${numCells.value}H0z`} shape-rendering="crispEdges" />
+          <path fill={props.fgColor} d={fgPath} shape-rendering="crispEdges" />
+          {imageNode.value}
+        </svg>
+      );
+    };
+  },
+});
diff --git a/packages/components/qrcode/components/style/css.js b/packages/components/qrcode/components/style/css.js
new file mode 100644
index 000000000..f388879ac
--- /dev/null
+++ b/packages/components/qrcode/components/style/css.js
@@ -0,0 +1,1 @@
+import '../../style/index.css';
diff --git a/packages/components/qrcode/components/style/index.js b/packages/components/qrcode/components/style/index.js
new file mode 100644
index 000000000..4a2e7d583
--- /dev/null
+++ b/packages/components/qrcode/components/style/index.js
@@ -0,0 +1,1 @@
+import '../../style/index.js';
diff --git a/packages/components/qrcode/components/type.ts b/packages/components/qrcode/components/type.ts
new file mode 100644
index 000000000..56df4d758
--- /dev/null
+++ b/packages/components/qrcode/components/type.ts
@@ -0,0 +1,81 @@
+import { CanvasHTMLAttributes, CSSProperties, SVGAttributes } from 'vue';
+import type { ErrorCorrectionLevel, ImageSettings } from '@tdesign/common-js/qrcode/types';
+import { QRCodeConfig } from '@tdesign/components/config-provider/type';
+import { StatusRenderInfo, TdQRCodeProps } from '../type';
+
+export interface QRCodeSubComponent {
+  /**
+   * The value to encode into the QR Code. An array of strings can be passed in
+   * to represent multiple segments to further optimize the QR Code.
+   */
+  value: string;
+  /**
+   * The size, in pixels, to render the QR Code.
+   * @defaultValue 128
+   */
+  size?: number;
+  /**
+   * The Error Correction Level to use.
+   * @see https://www.qrcode.com/en/about/error_correction.html
+   * @defaultValue L
+   */
+  level?: ErrorCorrectionLevel;
+  /**
+   * The background color used to render the QR Code.
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+   * @defaultValue #FFFFFF
+   */
+  bgColor?: string;
+  /**
+   * The foregtound color used to render the QR Code.
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+   * @defaultValue #000000
+   */
+  fgColor?: string;
+  /**
+   * The style to apply to the QR Code.
+   */
+  style?: CSSProperties;
+  /**
+   * Whether or not a margin of 4 modules should be rendered as a part of the
+   * QR Code.
+   * @deprecated Use `marginSize` instead.
+   * @defaultValue false
+   */
+  includeMargin?: boolean;
+  /**
+   * The number of _modules_ to use for margin. The QR Code specification
+   * requires `4`, however you can specify any number. Values will be turned to
+   * integers with `Math.floor`. Overrides `includeMargin` when both are specified.
+   * @defaultValue 0
+   */
+  marginSize?: number;
+  /**
+   * The settings for the embedded image.
+   */
+  imageSettings?: ImageSettings;
+  /**
+   * The title to assign to the QR Code. Used for accessibility reasons.
+   */
+  title?: string;
+  /**
+   * The minimum version used when encoding the QR Code. Valid values are 1-40
+   * with higher values resulting in more complex QR Codes. The optimal
+   * (lowest) version is determined for the `value` provided, using `minVersion`
+   * as the lower bound.
+   * @defaultValue 1
+   */
+  minVersion?: number;
+}
+
+export type QRCodeCanvas = QRCodeSubComponent & CanvasHTMLAttributes;
+
+export type QRCodeSVG = QRCodeSubComponent & SVGAttributes;
+
+export interface QRCodeStatus {
+  locale: QRCodeConfig;
+  classPrefix: string;
+  onRefresh?: TdQRCodeProps['onRefresh'];
+  statusRender?: TdQRCodeProps['statusRender'];
+  status: StatusRenderInfo['status'];
+}
diff --git a/packages/components/qrcode/hooks/useQRCode.ts b/packages/components/qrcode/hooks/useQRCode.ts
new file mode 100644
index 000000000..01349558c
--- /dev/null
+++ b/packages/components/qrcode/hooks/useQRCode.ts
@@ -0,0 +1,53 @@
+import { QrCode, QrSegment } from '@tdesign/common-js/qrcode/qrcodegen';
+import type { CrossOrigin, ErrorCorrectionLevel, Excavation, ImageSettings } from '@tdesign/common-js/qrcode/types';
+import { ERROR_LEVEL_MAP, getImageSettings, getMarginSize } from '@tdesign/common-js/qrcode/utils';
+import { computed, ComputedRef } from 'vue';
+
+interface Options {
+  value: string;
+  level: ErrorCorrectionLevel;
+  minVersion: number;
+  includeMargin: boolean;
+  marginSize?: number;
+  imageSettings?: ImageSettings;
+  size: number;
+}
+
+interface QRCodeResult {
+  cells: ComputedRef<boolean[][]>;
+  margin: ComputedRef<number>;
+  numCells: ComputedRef<number>;
+  calculatedImageSettings: ComputedRef<{
+    x: number;
+    y: number;
+    h: number;
+    w: number;
+    excavation: Excavation | null;
+    opacity: number;
+    crossOrigin: CrossOrigin;
+  }>;
+  qrcode: ComputedRef<QrCode>;
+}
+
+export const useQRCode = (opt: Options): QRCodeResult => {
+  const { value, level, minVersion, includeMargin, marginSize, imageSettings, size } = opt;
+
+  const memoizedQrcode = computed(() => {
+    const segments = QrSegment.makeSegments(value);
+    return QrCode.encodeSegments(segments, ERROR_LEVEL_MAP[level], minVersion);
+  });
+
+  const cs = computed(() => memoizedQrcode.value.getModules());
+  const mg = computed(() => getMarginSize(includeMargin, marginSize));
+  const cis = computed(() => getImageSettings(cs.value, size, mg.value, imageSettings));
+
+  return {
+    cells: cs,
+    margin: mg,
+    numCells: computed(() => cs.value.length + mg.value * 2),
+    calculatedImageSettings: cis,
+    qrcode: memoizedQrcode,
+  };
+};
+
+export default useQRCode;
diff --git a/packages/components/qrcode/index.ts b/packages/components/qrcode/index.ts
new file mode 100644
index 000000000..ef7266207
--- /dev/null
+++ b/packages/components/qrcode/index.ts
@@ -0,0 +1,12 @@
+import _QRCode from './qrcode';
+import { withInstall } from '@tdesign/shared-utils';
+import { TdQRCodeProps } from './type';
+
+import './style';
+
+export type QRCodeProps = TdQRCodeProps;
+export * from './type';
+
+export const QRCode = withInstall(_QRCode, 'TQrcode');
+
+export default QRCode;
diff --git a/packages/components/qrcode/props.ts b/packages/components/qrcode/props.ts
new file mode 100644
index 000000000..2005ede54
--- /dev/null
+++ b/packages/components/qrcode/props.ts
@@ -0,0 +1,76 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdQRCodeProps } from './type';
+import { PropType } from 'vue';
+
+export default {
+  /** 二维码背景颜色 */
+  bgColor: {
+    type: String,
+    default: '',
+  },
+  /** 是否有边框 */
+  borderless: Boolean,
+  /** 二维码颜色 */
+  color: {
+    type: String,
+    default: '',
+  },
+  /** 二维码中图片的地址 */
+  icon: {
+    type: String,
+    default: '',
+  },
+  /** 二维码中图片的大小 */
+  iconSize: {
+    type: [Number, Object] as PropType<TdQRCodeProps['iconSize']>,
+    default: 40 as TdQRCodeProps['iconSize'],
+  },
+  /** 二维码纠错等级 */
+  level: {
+    type: String as PropType<TdQRCodeProps['level']>,
+    default: 'M' as TdQRCodeProps['level'],
+    validator(val: TdQRCodeProps['level']): boolean {
+      if (!val) return true;
+      return ['L', 'M', 'Q', 'H'].includes(val);
+    },
+  },
+  /** 二维码大小 */
+  size: {
+    type: Number,
+    default: 160,
+  },
+  /** 二维码状态 */
+  status: {
+    type: String as PropType<TdQRCodeProps['status']>,
+    default: 'active' as TdQRCodeProps['status'],
+    validator(val: TdQRCodeProps['status']): boolean {
+      if (!val) return true;
+      return ['active', 'expired', 'loading', 'scanned'].includes(val);
+    },
+  },
+  /** 自定义状态渲染器 */
+  statusRender: {
+    type: Function as PropType<TdQRCodeProps['statusRender']>,
+  },
+  /** 渲染类型 */
+  type: {
+    type: String as PropType<TdQRCodeProps['type']>,
+    default: 'canvas' as TdQRCodeProps['type'],
+    validator(val: TdQRCodeProps['type']): boolean {
+      if (!val) return true;
+      return ['canvas', 'svg'].includes(val);
+    },
+  },
+  /** 扫描后的文本 */
+  value: {
+    type: String,
+    default: '',
+  },
+  /** 点击"点击刷新"的回调 */
+  onRefresh: Function as PropType<TdQRCodeProps['onRefresh']>,
+};
diff --git a/packages/components/qrcode/qrcode.en-US.md b/packages/components/qrcode/qrcode.en-US.md
new file mode 100644
index 000000000..e945e4f77
--- /dev/null
+++ b/packages/components/qrcode/qrcode.en-US.md
@@ -0,0 +1,26 @@
+:: BASE_DOC ::
+
+## API
+
+### QRCode Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+bgColor | String | - | QR code background color | N
+borderless | Boolean | false | Is there a border | N
+color | String | - | QR code color | N
+icon | String | - | The address or custom icon of the picture in the QR code | N
+iconSize | Number / Object | 40 | The size of the picture in the QR code。Typescript：`number \| { width: number; height: number }` | N
+level | String | M | QR code error correction level。options: L/M/Q/H | N
+size | Number | 160 | QR code size | N
+status | String | active | QR code status。options: active/expired/loading/scanned。Typescript：`QRStatus` `type QRStatus = "active" \| "expired" \| "loading" \| "scanned"`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/qrcode/type.ts) | N
+statusRender | Slot / Function | - | Custom state renderer。Typescript：`(info:StatusRenderInfo) => TNode` `type StatusRenderInfo = {status:QRStatus;onRefresh?: () => void;}`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/qrcode/type.ts) | N
+type | String | canvas | render type。options: canvas/svg | N
+value | String | - | scanned text | N
+onRefresh | Function |  | Typescript：`() => void`<br/>Click the "Click to refresh" callback | N
+
+### QRCode Events
+
+name | params | description
+-- | -- | --
+refresh | \- | Click the "Click to refresh" callback
diff --git a/packages/components/qrcode/qrcode.md b/packages/components/qrcode/qrcode.md
new file mode 100644
index 000000000..2fed2f42a
--- /dev/null
+++ b/packages/components/qrcode/qrcode.md
@@ -0,0 +1,26 @@
+:: BASE_DOC ::
+
+## API
+
+### QRCode Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+bgColor | String | - | 二维码背景颜色 | N
+borderless | Boolean | false | 是否有边框 | N
+color | String | - | 二维码颜色 | N
+icon | String | - | 二维码中图片的地址 | N
+iconSize | Number / Object | 40 | 二维码中图片的大小。TS 类型：`number \| { width: number; height: number }` | N
+level | String | M | 二维码纠错等级。可选项：L/M/Q/H | N
+size | Number | 160 | 二维码大小 | N
+status | String | active | 二维码状态。可选项：active/expired/loading/scanned。TS 类型：`QRStatus` `type QRStatus = "active" \| "expired" \| "loading" \| "scanned"`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/qrcode/type.ts) | N
+statusRender | Slot / Function | - | 自定义状态渲染器。TS 类型：`(info:StatusRenderInfo) => TNode` `type StatusRenderInfo = {status:QRStatus;onRefresh?: () => void;}`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/qrcode/type.ts) | N
+type | String | canvas | 渲染类型。可选项：canvas/svg | N
+value | String | - | 扫描后的文本 | N
+onRefresh | Function |  | TS 类型：`() => void`<br/>点击"点击刷新"的回调 | N
+
+### QRCode Events
+
+名称 | 参数 | 描述
+-- | -- | --
+refresh | \- | 点击"点击刷新"的回调
diff --git a/packages/components/qrcode/qrcode.tsx b/packages/components/qrcode/qrcode.tsx
new file mode 100644
index 000000000..9820dc671
--- /dev/null
+++ b/packages/components/qrcode/qrcode.tsx
@@ -0,0 +1,103 @@
+import { computed, defineComponent } from 'vue';
+import props from './props';
+import { DEFAULT_FRONT_COLOR } from '@tdesign/common-js/qrcode/utils';
+import { usePrefixClass, useConfig, useTNodeJSX, useVariables } from '@tdesign/shared-hooks';
+
+import QRCodeCanvas from './components/qrcode-canvas';
+import QRCodeSVG from './components/qrcode-svg';
+import QRcodeStatus from './components/qrcode-status';
+
+import type { ImageSettings } from '@tdesign/common-js/qrcode/types';
+import { isNumber } from 'lodash-es';
+
+export default defineComponent({
+  name: 'TQRCode',
+  props,
+  setup(props) {
+    const classPrefix = usePrefixClass();
+    const renderTNodeJSX = useTNodeJSX();
+    const { globalConfig } = useConfig('qrcode');
+
+    const { themeFgColor, themeBgColor } = useVariables({
+      themeFgColor: '--td-text-color-primary',
+      themeBgColor: '--td-bg-color-specialcomponent',
+    });
+
+    // bgColor：自定义颜色 > 主题色适配 > 透明[transparent]
+    const finalBgColor = computed(() => props.bgColor || themeBgColor.value || 'transparent');
+    // color[fgColor]：自定义颜色 > 主题色适配 > 默认颜色[#000000]
+    const finalFgColor = computed(() => props.color || themeFgColor.value || DEFAULT_FRONT_COLOR);
+
+    if (!props.value) {
+      return null;
+    }
+
+    const imageSettings = computed<ImageSettings>(() => {
+      return {
+        src: props.icon,
+        x: undefined,
+        y: undefined,
+        height: isNumber(props.iconSize) ? props.iconSize : props.iconSize?.height ?? 40,
+        width: isNumber(props.iconSize) ? props.iconSize : props.iconSize?.width ?? 40,
+        excavate: true,
+        crossOrigin: 'anonymous',
+      };
+    });
+
+    const classes = computed(() => {
+      return [
+        `${classPrefix.value}-qrcode`,
+        {
+          [`${classPrefix.value}-borderless`]: props.borderless,
+          [`${classPrefix.value}-qrcode-svg`]: props.type === 'svg',
+        },
+      ];
+    });
+
+    const mergedStyle = computed(() => {
+      return {
+        backgroundColor: finalBgColor.value,
+        width: `${props.size}px`,
+        height: `${props.size}px`,
+      };
+    });
+
+    return () => {
+      const QRCodeProps = {
+        value: props.value,
+        size: props.size,
+        bgColor: finalBgColor.value,
+        fgColor: finalFgColor.value,
+        imageSettings: props.icon ? imageSettings.value : undefined,
+        level: props.level,
+      };
+
+      return (
+        <div class={classes.value} style={mergedStyle.value} {...{ level: props.level }}>
+          {props.status !== 'active' && (
+            <div
+              class={[
+                `${classPrefix.value}-mask`,
+                { [`${classPrefix.value}-${props.status}`]: props.status !== 'loading' },
+              ]}
+            >
+              <QRcodeStatus
+                locale={globalConfig.value}
+                status={props.status}
+                onRefresh={props.onRefresh}
+                statusRender={renderTNodeJSX('statusRender', {
+                  params: { status: props.status, onRefresh: props.onRefresh },
+                })}
+              />
+            </div>
+          )}
+          {props.type === 'canvas' ? (
+            <QRCodeCanvas {...QRCodeProps} size={props.size} />
+          ) : (
+            <QRCodeSVG {...QRCodeProps} size={props.size} />
+          )}
+        </div>
+      );
+    };
+  },
+});
diff --git a/packages/components/qrcode/style/css.js b/packages/components/qrcode/style/css.js
new file mode 100644
index 000000000..6a9a4b132
--- /dev/null
+++ b/packages/components/qrcode/style/css.js
@@ -0,0 +1,1 @@
+import './index.css';
diff --git a/packages/components/qrcode/style/index.js b/packages/components/qrcode/style/index.js
new file mode 100644
index 000000000..c11526a73
--- /dev/null
+++ b/packages/components/qrcode/style/index.js
@@ -0,0 +1,1 @@
+import '@tdesign/common-style/web/components/qrcode/_index.less';
diff --git a/packages/components/qrcode/type.ts b/packages/components/qrcode/type.ts
new file mode 100644
index 000000000..2bfad5e9e
--- /dev/null
+++ b/packages/components/qrcode/type.ts
@@ -0,0 +1,72 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TNode } from '../common';
+
+export interface TdQRCodeProps {
+  /**
+   * 二维码背景颜色
+   * @default ''
+   */
+  bgColor?: string;
+  /**
+   * 是否有边框
+   * @default false
+   */
+  borderless?: boolean;
+  /**
+   * 二维码颜色
+   * @default ''
+   */
+  color?: string;
+  /**
+   * 二维码中图片的地址
+   * @default ''
+   */
+  icon?: string;
+  /**
+   * 二维码中图片的大小
+   * @default 40
+   */
+  iconSize?: number | { width: number; height: number };
+  /**
+   * 二维码纠错等级
+   * @default M
+   */
+  level?: 'L' | 'M' | 'Q' | 'H';
+  /**
+   * 二维码大小
+   * @default 160
+   */
+  size?: number;
+  /**
+   * 二维码状态
+   * @default active
+   */
+  status?: QRStatus;
+  /**
+   * 自定义状态渲染器
+   */
+  statusRender?: TNode<StatusRenderInfo>;
+  /**
+   * 渲染类型
+   * @default canvas
+   */
+  type?: 'canvas' | 'svg';
+  /**
+   * 扫描后的文本
+   * @default ''
+   */
+  value?: string;
+  /**
+   * 点击"点击刷新"的回调
+   */
+  onRefresh?: () => void;
+}
+
+export type QRStatus = 'active' | 'expired' | 'loading' | 'scanned';
+
+export type StatusRenderInfo = { status: QRStatus; onRefresh?: () => void };
diff --git a/packages/shared/hooks/index.ts b/packages/shared/hooks/index.ts
index da8b12aba..f1c9f76d1 100644
--- a/packages/shared/hooks/index.ts
+++ b/packages/shared/hooks/index.ts
@@ -22,3 +22,5 @@ export * from './useTeleport';
 export * from './useVModel';
 export * from './useVirtualScroll';
 export * from './useVirtualScrollNew';
+export * from './useMutationObservable';
+export * from './useVariables';
diff --git a/packages/shared/hooks/useMutationObservable/index.md b/packages/shared/hooks/useMutationObservable/index.md
new file mode 100644
index 000000000..5f5acb401
--- /dev/null
+++ b/packages/shared/hooks/useMutationObservable/index.md
@@ -0,0 +1,1 @@
+useMutationObservable
\ No newline at end of file
diff --git a/packages/shared/hooks/useMutationObservable/index.ts b/packages/shared/hooks/useMutationObservable/index.ts
new file mode 100644
index 000000000..84a64be55
--- /dev/null
+++ b/packages/shared/hooks/useMutationObservable/index.ts
@@ -0,0 +1,65 @@
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { debounce, isEqual } from 'lodash-es';
+
+export interface MutationCallback {
+  (mutations: MutationRecord[]): void;
+}
+
+interface Options {
+  debounceTime?: number;
+  config?: MutationObserverInit;
+}
+
+const DEFAULT_OPTIONS: Options = {
+  debounceTime: 0,
+  config: {
+    attributes: true,
+    childList: true,
+    characterData: true,
+    subtree: true,
+  },
+};
+
+/**
+ * useMutationObservable
+ * @param targetEl 监听对象
+ * @param callback 回调方法
+ * @param options 配置项
+ */
+export function useMutationObservable(
+  targetEl: HTMLElement | null,
+  callback: MutationCallback,
+  options: Options = DEFAULT_OPTIONS,
+) {
+  const mergedOptions = ref<Options>({ ...DEFAULT_OPTIONS, ...options });
+  let observer: MutationObserver | null = null;
+
+  const initObserver = () => {
+    if (!targetEl) return;
+
+    const { debounceTime = 0, config = DEFAULT_OPTIONS.config } = mergedOptions.value;
+    const handler: MutationCallback = (...args) => {
+      callback?.(...args);
+    };
+
+    observer?.disconnect();
+    observer = new MutationObserver(debounceTime > 0 ? debounce(handler, debounceTime) : handler);
+    observer.observe(targetEl, config);
+  };
+
+  watch(
+    () => options,
+    (newOptions) => {
+      if (!isEqual(newOptions, mergedOptions.value)) {
+        mergedOptions.value = { ...DEFAULT_OPTIONS, ...newOptions };
+        initObserver();
+      }
+    },
+    { deep: true },
+  );
+
+  onMounted(initObserver);
+  onBeforeUnmount(() => observer?.disconnect());
+}
+
+export default useMutationObservable;
diff --git a/packages/shared/hooks/useVariables/index.md b/packages/shared/hooks/useVariables/index.md
new file mode 100644
index 000000000..50c9b27ab
--- /dev/null
+++ b/packages/shared/hooks/useVariables/index.md
@@ -0,0 +1,1 @@
+useVariables
\ No newline at end of file
diff --git a/packages/shared/hooks/useVariables/index.ts b/packages/shared/hooks/useVariables/index.ts
new file mode 100644
index 000000000..5d6bc06c9
--- /dev/null
+++ b/packages/shared/hooks/useVariables/index.ts
@@ -0,0 +1,50 @@
+import { ref } from 'vue';
+import type { Ref } from 'vue';
+import { isString } from 'lodash-es';
+import { THEME_MODE } from '@tdesign/common-js/common';
+import { getColorTokenColor } from '@tdesign/shared-utils/dom';
+import useMutationObservable from '../useMutationObservable';
+
+/**
+ * useVariables
+ * @param variable CSS 变量名
+ * @example
+ *   const { textColor, brandColor } = useVariables({
+ *      textColor: '--td-color-primary',
+ *      brandColor: '--td-brand-color',
+ *   });
+ */
+export function useVariables<T extends Record<string, string>>(variables: T): Record<keyof T, Ref<string>> {
+  const values = {} as Record<keyof T, Ref<string>>;
+  let varsArray: string[] = [];
+
+  varsArray = Object.values(variables);
+  Object.entries(variables).forEach(([key, varName]) => {
+    values[key as keyof T] = ref(getColorTokenColor(varName));
+  });
+
+  varsArray.forEach((varName) => {
+    values[varName as keyof T] = ref(getColorTokenColor(varName));
+  });
+
+  const targetElement = document?.documentElement;
+  useMutationObservable(targetElement, (mutationsList) => {
+    mutationsList.some((mutation) => {
+      if (mutation.type === 'attributes' && mutation.attributeName === THEME_MODE) {
+        if (isString(variables) || Array.isArray(variables)) {
+          varsArray.forEach((varName) => {
+            values[varName].value = getColorTokenColor(varName);
+          });
+        } else {
+          Object.entries(variables).forEach(([key, varName]) => {
+            values[key].value = getColorTokenColor(varName);
+          });
+        }
+        return true;
+      }
+      return false;
+    });
+  });
+
+  return values;
+}
diff --git a/packages/shared/utils/dom.ts b/packages/shared/utils/dom.ts
index 1f2cc8fbe..38635679d 100644
--- a/packages/shared/utils/dom.ts
+++ b/packages/shared/utils/dom.ts
@@ -384,3 +384,14 @@ export function getWindowSize(): { width: number; height: number } {
 export const isCommentVNode = (node: unknown): node is VNode => {
   return isVNode(node) && node.type === Comment;
 };
+
+/**
+ * 获取颜色token的色值
+ * @example getColorTokenColor('--td-brand-color')
+ * @returns string
+ */
+export const getColorTokenColor = (token: string): string => {
+  const targetElement = document?.documentElement;
+  const styles = getComputedStyle(targetElement);
+  return styles.getPropertyValue(token).trim() ?? '';
+};
diff --git a/packages/tdesign-vue-next/.changelog/pr-5670.md b/packages/tdesign-vue-next/.changelog/pr-5670.md
new file mode 100644
index 000000000..4512abb22
--- /dev/null
+++ b/packages/tdesign-vue-next/.changelog/pr-5670.md
@@ -0,0 +1,6 @@
+---
+pr_number: 5670
+contributor: baozjj
+---
+
+- feat(Pagination): 优化 `PaginationMini`  的显示提示文案展示 @baozjj ([#5670](https://github.com/Tencent/tdesign-vue-next/pull/5670))
diff --git a/packages/tdesign-vue-next/.changelog/pr-5719.md b/packages/tdesign-vue-next/.changelog/pr-5719.md
new file mode 100644
index 000000000..4dbbea1bc
--- /dev/null
+++ b/packages/tdesign-vue-next/.changelog/pr-5719.md
@@ -0,0 +1,6 @@
+---
+pr_number: 5719
+contributor: Wesley-0808
+---
+
+- feat(QRCode): 新增 `QRCode` 二维码组件 @Wesley-0808 ([#5719](https://github.com/Tencent/tdesign-vue-next/pull/5719))
diff --git a/packages/tdesign-vue-next/.changelog/pr-5726.md b/packages/tdesign-vue-next/.changelog/pr-5726.md
new file mode 100644
index 000000000..90f991e14
--- /dev/null
+++ b/packages/tdesign-vue-next/.changelog/pr-5726.md
@@ -0,0 +1,6 @@
+---
+pr_number: 5726
+contributor: cfool
+---
+
+- feat(InputAdornment): InputAdornment 透传原生属性 @cfool ([#5726](https://github.com/Tencent/tdesign-vue-next/pull/5726))
diff --git a/packages/tdesign-vue-next/.changelog/pr-5732.md b/packages/tdesign-vue-next/.changelog/pr-5732.md
new file mode 100644
index 000000000..db19d363b
--- /dev/null
+++ b/packages/tdesign-vue-next/.changelog/pr-5732.md
@@ -0,0 +1,6 @@
+---
+pr_number: 5732
+contributor: betavs
+---
+
+- fix(DatePicker): 处理多选情况下周和季度模式的标签删除异常的问题 @betavs ([#5732](https://github.com/Tencent/tdesign-vue-next/pull/5732))
diff --git a/packages/tdesign-vue-next/helper/attributes.json b/packages/tdesign-vue-next/helper/attributes.json
index c8959b47b..53d604f4c 100644
--- a/packages/tdesign-vue-next/helper/attributes.json
+++ b/packages/tdesign-vue-next/helper/attributes.json
@@ -2018,6 +2018,72 @@
     "type": "event",
     "description": "年份切换发生变化时触发\n\n[docs](https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#datepickerpanel-events)"
   },
+  "t-date-picker-panel/disable-date": {
+    "type": "Object|Array|Function",
+    "description": "禁用日期，示例：['A', 'B'] 表示日期 A 和日期 B 会被禁用。`{ from: 'A', to: 'B' }` 表示在 A 到 B 之间的日期会被禁用。`{ before: 'A', after: 'B' }` 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01'，B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用\n\n[docs](https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#datepickerpanel-props)"
+  },
+  "t-date-picker-panel/disable-time": {
+    "type": "Function",
+    "description": "disable time config function\n\n禁用时间项的配置函数，仅在日期时间选择器中可用\n\n[docs](https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#datepickerpanel-props)"
+  },
+  "t-date-picker-panel/enable-time-picker": {
+    "type": "Boolean",
+    "description": "是否显示时间选择\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#datepickerpanel-props)"
+  },
+  "t-date-picker-panel/first-day-of-week": {
+    "type": "Number",
+    "options": [
+      "1",
+      "2",
+      "3",
+      "4",
+      "5",
+      "6",
+      "7"
+    ],
+    "description": "第一天从星期几开始\n\n[docs](https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#datepickerpanel-props)"
+  },
+  "t-date-picker-panel/format": {
+    "type": "String",
+    "description": "仅用于格式化日期显示的格式，不影响日期值。注意和 `valueType` 的区别，`valueType`会直接决定日期值 `value` 的格式。全局配置默认为：'YYYY-MM-DD'，[详细文档](https://day.js.org/docs/en/display/format)\n\ndefault: undefined\n\n[docs](https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#datepickerpanel-props)"
+  },
+  "t-date-picker-panel/mode": {
+    "type": "String",
+    "options": [
+      "year",
+      "quarter",
+      "month",
+      "week",
+      "date"
+    ],
+    "description": "选择器模式\n\ndefault: date\n\n[docs](https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#datepickerpanel-props)"
+  },
+  "t-date-picker-panel/need-confirm": {
+    "type": "Boolean",
+    "description": "whether a confirmation button needs to be clicked to complete the action in the date-time picker scenario, default is true\n\n决定在日期时间选择器的场景下是否需要点击确认按钮才完成选择动作，默认为`true`\n\ndefault: true\n\n[docs](https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#datepickerpanel-props)"
+  },
+  "t-date-picker-panel/presets": {
+    "type": "Object",
+    "description": "预设快捷日期选择，示例：`{ '元旦': '2021-01-01', '昨天':  dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`\n\n[docs](https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#datepickerpanel-props)"
+  },
+  "t-date-picker-panel/presets-placement": {
+    "type": "String",
+    "options": [
+      "left",
+      "top",
+      "right",
+      "bottom"
+    ],
+    "description": "预设面板展示区域（包含确定按钮）\n\ndefault: bottom\n\n[docs](https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#datepickerpanel-props)"
+  },
+  "t-date-picker-panel/time-picker-props": {
+    "type": "Object",
+    "description": "透传 TimePicker 组件属性\n\n[docs](https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#datepickerpanel-props)"
+  },
+  "t-date-picker-panel/value": {
+    "type": "String|Number|Array|Date",
+    "description": "选中值\n\ndefault: ''\n\n[docs](https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#datepickerpanel-props)"
+  },
   "t-date-range-picker/allow-input": {
     "type": "Boolean",
     "description": "是否允许输入日期\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepicker-props)"
@@ -2246,6 +2312,68 @@
     "type": "event",
     "description": "年份切换发生变化时触发\n\n[docs](https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-events)"
   },
+  "t-date-range-picker-panel/disable-date": {
+    "type": "Object|Array|Function",
+    "description": "禁用日期，示例：['A', 'B'] 表示日期 A 和日期 B 会被禁用。{ from: 'A', to: 'B' } 表示在 A 到 B 之间的日期会被禁用。{ before: 'A', after: 'B' } 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01'，B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用\n\n[docs](https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-props)"
+  },
+  "t-date-range-picker-panel/enable-time-picker": {
+    "type": "Boolean",
+    "description": "是否显示时间选择\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-props)"
+  },
+  "t-date-range-picker-panel/first-day-of-week": {
+    "type": "Number",
+    "options": [
+      "1",
+      "2",
+      "3",
+      "4",
+      "5",
+      "6",
+      "7"
+    ],
+    "description": "第一天从星期几开始\n\n[docs](https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-props)"
+  },
+  "t-date-range-picker-panel/format": {
+    "type": "String",
+    "description": "用于格式化日期，[详细文档](https://day.js.org/docs/en/display/format)\n\n[docs](https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-props)"
+  },
+  "t-date-range-picker-panel/mode": {
+    "type": "String",
+    "options": [
+      "year",
+      "quarter",
+      "month",
+      "week",
+      "date"
+    ],
+    "description": "选择器模式\n\ndefault: date\n\n[docs](https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-props)"
+  },
+  "t-date-range-picker-panel/panel-preselection": {
+    "type": "Boolean",
+    "description": "在开始日期选中之前，面板是否显示预选状态，即是否高亮预选日期\n\ndefault: true\n\n[docs](https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-props)"
+  },
+  "t-date-range-picker-panel/presets": {
+    "type": "Object",
+    "description": "预设快捷日期选择，示例：{ '特定日期范围': ['2021-01-01', '2022-01-01'], '本月': [dayjs().startOf('month'), dayjs().endOf('month')] }\n\n[docs](https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-props)"
+  },
+  "t-date-range-picker-panel/presets-placement": {
+    "type": "String",
+    "options": [
+      "left",
+      "top",
+      "right",
+      "bottom"
+    ],
+    "description": "预设面板展示区域（包含确定按钮）\n\ndefault: bottom\n\n[docs](https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-props)"
+  },
+  "t-date-range-picker-panel/time-picker-props": {
+    "type": "Object",
+    "description": "透传 TimePicker 组件属性\n\n[docs](https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-props)"
+  },
+  "t-date-range-picker-panel/value": {
+    "type": "Array",
+    "description": "选中值\n\ndefault: []\n\n[docs](https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-props)"
+  },
   "t-descriptions/bordered": {
     "type": "Boolean",
     "description": "set description list with grey border\n\n是否带边框\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue-next/components/descriptions?tab=api#descriptions-props)"
@@ -2502,11 +2630,11 @@
   },
   "t-dialog-card/confirm-btn": {
     "type": "String|Object|TNode",
-    "description": "确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件\n\ndefault: true\n\n[docs](https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props)"
+    "description": "确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件\n\n[docs](https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props)"
   },
   "t-dialog-card/confirm-loading": {
     "type": "Boolean",
-    "description": "confirm button loading status\n\n确认按钮加载状态\n\n[docs](https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props)"
+    "description": "confirm button loading status\n\n确认按钮加载状态\n\ndefault: undefined\n\n[docs](https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props)"
   },
   "t-dialog-card/footer": {
     "type": "Boolean|TNode",
@@ -4884,6 +5012,498 @@
     "type": "event",
     "description": "trigger after row data validated\n\n可编辑行表格，全部数据校验完成后触发。即组件实例方法 `validateTableData` 执行结束后触发\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
   },
+  "t-primary-table/active-row-keys": {
+    "type": "Array",
+    "description": "keys of highlight rows, used to mock area selection behavior, just like macOS or windows area selection\n\n高亮行，支持鼠标键盘操作(Shift)连续高亮行，可用于处理行选中等批量操作，模拟操作系统区域选择行为\n\ndefault: []\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/active-row-keys": {
+    "type": "Array",
+    "description": "keys of highlight rows, used to mock area selection behavior, just like macOS or windows area selection\n\n高亮行，支持鼠标键盘操作(Shift)连续高亮行，可用于处理行选中等批量操作，模拟操作系统区域选择行为\n\ndefault: []\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/active-row-type": {
+    "type": "String",
+    "description": "make nodes can be highlight on clicked\n\n默认不会高亮点击行，`activeRowType=single` 表示鼠标点击仅允许同时高亮一行，Shift 键盘操作加鼠标操作依然可以高亮多行，因为这属于明显的区域选择行为。`activeRowType= multiple ` 表示允许鼠标点击同时高亮多行\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/active-row-type": {
+    "type": "String",
+    "description": "make nodes can be highlight on clicked\n\n默认不会高亮点击行，`activeRowType=single` 表示鼠标点击仅允许同时高亮一行，Shift 键盘操作加鼠标操作依然可以高亮多行，因为这属于明显的区域选择行为。`activeRowType= multiple ` 表示允许鼠标点击同时高亮多行\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/allow-resize-column-width": {
+    "type": "Boolean",
+    "description": "allow to resize column width\n\n是否允许调整列宽。请更为使用 `resizable`\n\ndefault: undefined\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/allow-resize-column-width": {
+    "type": "Boolean",
+    "description": "allow to resize column width\n\n是否允许调整列宽。请更为使用 `resizable`\n\ndefault: undefined\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/attach": {
+    "type": "String|Function",
+    "description": "elements with popup would be attached to `attach`\n\n超出省略等所有浮层元素统一绑定到 `attach`，可根据实际情况调整挂载元素\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/attach": {
+    "type": "String|Function",
+    "description": "elements with popup would be attached to `attach`\n\n超出省略等所有浮层元素统一绑定到 `attach`，可根据实际情况调整挂载元素\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/bordered": {
+    "type": "Boolean",
+    "description": "show table bordered\n\n是否显示表格边框\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/bordered": {
+    "type": "Boolean",
+    "description": "show table bordered\n\n是否显示表格边框\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/bottom-content": {
+    "type": "String|TNode",
+    "description": "表格底部内容，可以用于自定义列设置等\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/bottom-content": {
+    "type": "String|TNode",
+    "description": "表格底部内容，可以用于自定义列设置等\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/cell-empty-content": {
+    "type": "String|TNode",
+    "description": "单元格数据为空时呈现的内容\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/cell-empty-content": {
+    "type": "String|TNode",
+    "description": "单元格数据为空时呈现的内容\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/data": {
+    "type": "Array",
+    "description": "table data\n\n数据源，泛型 T 指表格数据类型\n\ndefault: []\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/data": {
+    "type": "Array",
+    "description": "table data\n\n数据源，泛型 T 指表格数据类型\n\ndefault: []\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/disable-data-page": {
+    "type": "Boolean",
+    "description": "是否禁用本地数据分页。当 `data` 数据长度超过分页大小时，会自动进行本地数据分页。如果 `disableDataPage` 设置为 true，则无论何时，都不会进行本地数据分页\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/disable-data-page": {
+    "type": "Boolean",
+    "description": "是否禁用本地数据分页。当 `data` 数据长度超过分页大小时，会自动进行本地数据分页。如果 `disableDataPage` 设置为 true，则无论何时，都不会进行本地数据分页\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/disable-space-inactive-row": {
+    "type": "Boolean",
+    "description": "can not set row to be inactive with Space keydown\n\n默认重复按下 Space 键可取消当前行高亮，是否禁用取消\n\ndefault: undefined\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/disable-space-inactive-row": {
+    "type": "Boolean",
+    "description": "can not set row to be inactive with Space keydown\n\n默认重复按下 Space 键可取消当前行高亮，是否禁用取消\n\ndefault: undefined\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/empty": {
+    "type": "String|TNode",
+    "description": "empty text or empty element\n\n空表格呈现样式，支持全局配置 `GlobalConfigProvider`\n\ndefault: ''\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/empty": {
+    "type": "String|TNode",
+    "description": "empty text or empty element\n\n空表格呈现样式，支持全局配置 `GlobalConfigProvider`\n\ndefault: ''\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/first-full-row": {
+    "type": "String|TNode",
+    "description": "首行内容，横跨所有列\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/first-full-row": {
+    "type": "String|TNode",
+    "description": "首行内容，横跨所有列\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/fixed-rows": {
+    "type": "Array",
+    "description": "固定行（冻结行），示例：[M, N]，表示冻结表头 M 行和表尾 N 行。M 和 N 值为 0 时，表示不冻结行\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/fixed-rows": {
+    "type": "Array",
+    "description": "固定行（冻结行），示例：[M, N]，表示冻结表头 M 行和表尾 N 行。M 和 N 值为 0 时，表示不冻结行\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/foot-data": {
+    "type": "Array",
+    "description": "table foot data\n\n表尾数据源，泛型 T 指表格数据类型\n\ndefault: []\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/foot-data": {
+    "type": "Array",
+    "description": "table foot data\n\n表尾数据源，泛型 T 指表格数据类型\n\ndefault: []\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/footer-affix-props": {
+    "type": "Object",
+    "description": "affix props\n\n请更为使用 `footerAffixedBottom`。表尾吸底基于 Affix 组件开发，透传全部 Affix 组件属性\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/footer-affix-props": {
+    "type": "Object",
+    "description": "affix props\n\n请更为使用 `footerAffixedBottom`。表尾吸底基于 Affix 组件开发，透传全部 Affix 组件属性\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/footer-affixed-bottom": {
+    "type": "Boolean|Object",
+    "description": "affix foot to viewport bottom\n\n表尾吸底。使用该功能，需要非常注意表格是相对于哪一个父元素进行滚动。值为 `true`，则表示相对于整个窗口吸底。如果表格滚动的父元素不是整个窗口，请通过 `footerAffixedBottom.container` 调整固钉的吸顶范围。基于 Affix 组件开发，透传全部 Affix 组件属性\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/footer-affixed-bottom": {
+    "type": "Boolean|Object",
+    "description": "affix foot to viewport bottom\n\n表尾吸底。使用该功能，需要非常注意表格是相对于哪一个父元素进行滚动。值为 `true`，则表示相对于整个窗口吸底。如果表格滚动的父元素不是整个窗口，请通过 `footerAffixedBottom.container` 调整固钉的吸顶范围。基于 Affix 组件开发，透传全部 Affix 组件属性\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/footer-summary": {
+    "type": "String|TNode",
+    "description": "footer summary content\n\n表尾总结行\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/footer-summary": {
+    "type": "String|TNode",
+    "description": "footer summary content\n\n表尾总结行\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/header-affix-props": {
+    "type": "Object",
+    "description": "affix props\n\n请更为使用 `headerAffixedTop`。表头吸顶基于 Affix 组件开发，透传全部 Affix 组件属性\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/header-affix-props": {
+    "type": "Object",
+    "description": "affix props\n\n请更为使用 `headerAffixedTop`。表头吸顶基于 Affix 组件开发，透传全部 Affix 组件属性\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/header-affixed-top": {
+    "type": "Boolean|Object",
+    "description": "affix header to viewport top\n\n表头吸顶。使用该功能，需要非常注意表格是相对于哪一个父元素进行滚动。值为 `true`，表示相对于整个窗口吸顶。如果表格滚动的父元素不是整个窗口，请通过 `headerAffixedTop.container` 调整吸顶的位置。基于 Affix 组件开发，透传全部 Affix 组件属性\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/header-affixed-top": {
+    "type": "Boolean|Object",
+    "description": "affix header to viewport top\n\n表头吸顶。使用该功能，需要非常注意表格是相对于哪一个父元素进行滚动。值为 `true`，表示相对于整个窗口吸顶。如果表格滚动的父元素不是整个窗口，请通过 `headerAffixedTop.container` 调整吸顶的位置。基于 Affix 组件开发，透传全部 Affix 组件属性\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/height": {
+    "type": "String|Number",
+    "description": "table height\n\n表格高度，超出后会出现滚动条。示例：100,  '30%',  '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight`\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/height": {
+    "type": "String|Number",
+    "description": "table height\n\n表格高度，超出后会出现滚动条。示例：100,  '30%',  '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight`\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/horizontal-scroll-affixed-bottom": {
+    "type": "Boolean|Object",
+    "description": "affix props\n\n滚动条吸底。基于 Affix 组件开发，透传全部 Affix 组件属性\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/horizontal-scroll-affixed-bottom": {
+    "type": "Boolean|Object",
+    "description": "affix props\n\n滚动条吸底。基于 Affix 组件开发，透传全部 Affix 组件属性\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/hover": {
+    "type": "Boolean",
+    "description": "show hover style\n\n是否显示鼠标悬浮状态\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/hover": {
+    "type": "Boolean",
+    "description": "show hover style\n\n是否显示鼠标悬浮状态\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/keyboard-row-hover": {
+    "type": "Boolean",
+    "description": "make table row to be hover by keydown ArrowUp/ArrowDown\n\n键盘操作行显示悬浮效果，一般用于键盘操作行选中、行展开、行高亮等功能\n\ndefault: true\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/keyboard-row-hover": {
+    "type": "Boolean",
+    "description": "make table row to be hover by keydown ArrowUp/ArrowDown\n\n键盘操作行显示悬浮效果，一般用于键盘操作行选中、行展开、行高亮等功能\n\ndefault: true\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/last-full-row": {
+    "type": "String|TNode",
+    "description": "尾行内容，横跨所有列\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/last-full-row": {
+    "type": "String|TNode",
+    "description": "尾行内容，横跨所有列\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/lazy-load": {
+    "type": "Boolean",
+    "description": "load table content when it entering the visible area, all elements in table are not rendered before it become visible\n\n是否启用整个表格元素的懒加载，当页面滚动到可视区域后再渲染表格。注意和表格内部行滚动懒加载的区别，内部行滚动无论表格是否在可视区域都会默认渲染第一屏的行元素\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/lazy-load": {
+    "type": "Boolean",
+    "description": "load table content when it entering the visible area, all elements in table are not rendered before it become visible\n\n是否启用整个表格元素的懒加载，当页面滚动到可视区域后再渲染表格。注意和表格内部行滚动懒加载的区别，内部行滚动无论表格是否在可视区域都会默认渲染第一屏的行元素\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/loading": {
+    "type": "Boolean|TNode",
+    "description": "loading state table\n\n加载中状态。值为 `true` 会显示默认加载中样式，可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。值为 `false` 则会取消加载状态\n\ndefault: undefined\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/loading": {
+    "type": "Boolean|TNode",
+    "description": "loading state table\n\n加载中状态。值为 `true` 会显示默认加载中样式，可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。值为 `false` 则会取消加载状态\n\ndefault: undefined\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/loading-props": {
+    "type": "Object",
+    "description": "透传加载组件全部属性\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/loading-props": {
+    "type": "Object",
+    "description": "透传加载组件全部属性\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/locale": {
+    "type": "Object",
+    "description": "table locale config\n\n语言配置\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/locale": {
+    "type": "Object",
+    "description": "table locale config\n\n语言配置\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/max-height": {
+    "type": "String|Number",
+    "description": "table max height\n\n表格最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/max-height": {
+    "type": "String|Number",
+    "description": "table max height\n\n表格最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/pagination": {
+    "type": "Object",
+    "description": "you can use all props of pagination component with paginationProps\n\n分页配置，值为空则不显示。具体 API 参考分页组件。当 `data` 数据长度超过分页大小时，会自动对本地数据 `data` 进行排序，如果不希望对于 `data` 进行排序，可以设置 `disableDataPage = true`\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/pagination": {
+    "type": "Object",
+    "description": "you can use all props of pagination component with paginationProps\n\n分页配置，值为空则不显示。具体 API 参考分页组件。当 `data` 数据长度超过分页大小时，会自动对本地数据 `data` 进行排序，如果不希望对于 `data` 进行排序，可以设置 `disableDataPage = true`\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/pagination-affixed-bottom": {
+    "type": "Boolean|Object",
+    "description": "affix props\n\n分页吸底。基于 Affix 组件开发，透传全部 Affix 组件属性\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/pagination-affixed-bottom": {
+    "type": "Boolean|Object",
+    "description": "affix props\n\n分页吸底。基于 Affix 组件开发，透传全部 Affix 组件属性\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/resizable": {
+    "type": "Boolean",
+    "description": "allow to resize column width, set `tableLayout=fixed` would be better\n\n是否允许调整列宽，设置 `tableLayout=fixed` 效果更友好，此时不允许通过 CSS 设置 `table`元素宽度，也不允许设置 `tableContentWidth`。一般不建议在列宽调整场景使用 `tableLayout: auto`。如果想要配置宽度可调整的最小值和最大值，请使用 `column.resize`，示例：`columns: [{ resize: { minWidth: 120, maxWidth: 300 } }]`。<br/> 默认规则：因列宽超出存在横向滚动条时，列宽调整仅影响当前列宽和总列宽；表格列较少没有横向滚动条时，列宽调整表现为自身宽度和相邻宽度变化\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/resizable": {
+    "type": "Boolean",
+    "description": "allow to resize column width, set `tableLayout=fixed` would be better\n\n是否允许调整列宽，设置 `tableLayout=fixed` 效果更友好，此时不允许通过 CSS 设置 `table`元素宽度，也不允许设置 `tableContentWidth`。一般不建议在列宽调整场景使用 `tableLayout: auto`。如果想要配置宽度可调整的最小值和最大值，请使用 `column.resize`，示例：`columns: [{ resize: { minWidth: 120, maxWidth: 300 } }]`。<br/> 默认规则：因列宽超出存在横向滚动条时，列宽调整仅影响当前列宽和总列宽；表格列较少没有横向滚动条时，列宽调整表现为自身宽度和相邻宽度变化\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/row-attributes": {
+    "type": "Object|Array|Function",
+    "description": "`tr` attributes\n\nHTML 标签 `tr` 的属性。类型为 Function 时，参数说明：`params.row` 表示行数据；`params.rowIndex` 表示行下标；`params.type=body` 表示属性作用于 `tbody` 中的元素；`params.type=foot` 表示属性作用于 `tfoot` 中的元素。<br />示例一：{ draggable: true }，<br />示例二：[{ draggable: true }, { title: '超出省略显示' }]。<br /> 示例三：() => [{ draggable: true }]\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/row-attributes": {
+    "type": "Object|Array|Function",
+    "description": "`tr` attributes\n\nHTML 标签 `tr` 的属性。类型为 Function 时，参数说明：`params.row` 表示行数据；`params.rowIndex` 表示行下标；`params.type=body` 表示属性作用于 `tbody` 中的元素；`params.type=foot` 表示属性作用于 `tfoot` 中的元素。<br />示例一：{ draggable: true }，<br />示例二：[{ draggable: true }, { title: '超出省略显示' }]。<br /> 示例三：() => [{ draggable: true }]\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/row-class-name": {
+    "type": "String|Object|Array|Function",
+    "description": "table `th` classname\n\n行类名，泛型 T 指表格数据类型。`params.row` 表示行数据；`params.rowIndex` 表示行下标；`params.type=body`  表示类名作用于 `tbody` 中的元素；`params.type= tfoot` 表示类名作用于 `tfoot` 中的元素\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/row-class-name": {
+    "type": "String|Object|Array|Function",
+    "description": "table `th` classname\n\n行类名，泛型 T 指表格数据类型。`params.row` 表示行数据；`params.rowIndex` 表示行下标；`params.type=body`  表示类名作用于 `tbody` 中的元素；`params.type= tfoot` 表示类名作用于 `tfoot` 中的元素\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/row-key": {
+    "type": "String",
+    "description": "unique key for each row data\n\n唯一标识一行数据的字段名，来源于 `data` 中的字段。如果是字段嵌套多层，可以设置形如 `item.a.id` 的方法\n\ndefault: 'id'\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/row-key": {
+    "type": "String",
+    "description": "unique key for each row data\n\n唯一标识一行数据的字段名，来源于 `data` 中的字段。如果是字段嵌套多层，可以设置形如 `item.a.id` 的方法\n\ndefault: 'id'\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/rowspan-and-colspan": {
+    "type": "Function",
+    "description": "rowspan and colspan\n\n用于自定义合并单元格，泛型 T 指表格数据类型。示例：`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }`\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/rowspan-and-colspan": {
+    "type": "Function",
+    "description": "rowspan and colspan\n\n用于自定义合并单元格，泛型 T 指表格数据类型。示例：`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }`\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/rowspan-and-colspan-in-footer": {
+    "type": "Function",
+    "description": "rowspan and colspan for footer\n\n用于自定义表尾的合并单元格，泛型 T 指表格数据类型。示例：`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }`\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/rowspan-and-colspan-in-footer": {
+    "type": "Function",
+    "description": "rowspan and colspan for footer\n\n用于自定义表尾的合并单元格，泛型 T 指表格数据类型。示例：`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }`\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/scroll": {
+    "type": "event",
+    "description": "trigger on table content scroll\n\n表格内容滚动时触发\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
+  "t-table/scroll": {
+    "type": "event",
+    "description": "trigger on table content scroll\n\n表格内容滚动时触发\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
+  "t-primary-table/show-header": {
+    "type": "Boolean",
+    "description": "show table header\n\n是否显示表头\n\ndefault: true\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/show-header": {
+    "type": "Boolean",
+    "description": "show table header\n\n是否显示表头\n\ndefault: true\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/size": {
+    "type": "String",
+    "options": [
+      "small",
+      "medium",
+      "large"
+    ],
+    "description": "table size, support `GlobalConfigProvider`, default value is `medium`\n\n表格尺寸，支持全局配置 `GlobalConfigProvider`，默认全局配置值为 `medium`\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/size": {
+    "type": "String",
+    "options": [
+      "small",
+      "medium",
+      "large"
+    ],
+    "description": "table size, support `GlobalConfigProvider`, default value is `medium`\n\n表格尺寸，支持全局配置 `GlobalConfigProvider`，默认全局配置值为 `medium`\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/stripe": {
+    "type": "Boolean",
+    "description": "show stripe style\n\n是否显示斑马纹\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/stripe": {
+    "type": "Boolean",
+    "description": "show stripe style\n\n是否显示斑马纹\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/table-content-width": {
+    "type": "String",
+    "description": "表格内容的总宽度，注意不是表格可见宽度。主要应用于 `table-layout: auto` 模式下的固定列显示。`tableContentWidth` 内容宽度的值必须大于表格可见宽度\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/table-content-width": {
+    "type": "String",
+    "description": "表格内容的总宽度，注意不是表格可见宽度。主要应用于 `table-layout: auto` 模式下的固定列显示。`tableContentWidth` 内容宽度的值必须大于表格可见宽度\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/table-layout": {
+    "type": "String",
+    "options": [
+      "auto",
+      "fixed"
+    ],
+    "description": "table-layout css properties, [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout). set value to be `fixed` on `resizable=true` please\n\n表格布局方式，`<table>` 元素原生属性。[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout)。注意，在列宽调整下场景只能使用 `fixed` 模式\n\ndefault: fixed\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/table-layout": {
+    "type": "String",
+    "options": [
+      "auto",
+      "fixed"
+    ],
+    "description": "table-layout css properties, [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout). set value to be `fixed` on `resizable=true` please\n\n表格布局方式，`<table>` 元素原生属性。[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout)。注意，在列宽调整下场景只能使用 `fixed` 模式\n\ndefault: fixed\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/top-content": {
+    "type": "String|TNode",
+    "description": "表格顶部内容，可以用于自定义列设置、顶部查询条件等\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/top-content": {
+    "type": "String|TNode",
+    "description": "表格顶部内容，可以用于自定义列设置、顶部查询条件等\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/vertical-align": {
+    "type": "String",
+    "options": [
+      "top",
+      "middle",
+      "bottom"
+    ],
+    "description": "vertical align\n\n行内容上下方向对齐\n\ndefault: middle\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-table/vertical-align": {
+    "type": "String",
+    "options": [
+      "top",
+      "middle",
+      "bottom"
+    ],
+    "description": "vertical align\n\n行内容上下方向对齐\n\ndefault: middle\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props)"
+  },
+  "t-primary-table/active-change": {
+    "type": "event",
+    "description": "trigger on row active change\n\n高亮行发生变化时触发，泛型 T 指表格数据类型。参数 `activeRowList` 表示所有高亮行数据， `currentRowData` 表示当前操作行数据\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
+  "t-table/active-change": {
+    "type": "event",
+    "description": "trigger on row active change\n\n高亮行发生变化时触发，泛型 T 指表格数据类型。参数 `activeRowList` 表示所有高亮行数据， `currentRowData` 表示当前操作行数据\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
+  "t-primary-table/active-row-action": {
+    "type": "event",
+    "description": "keyboard operation event actions. used to mock selection behavior, just like macOS or windows\n\n键盘操作事件。开启行高亮功能后，会自动开启键盘操作功能，如：通过键盘(Shift)或鼠标操作连续选中高亮行时触发，一般用于处理行选中等批量操作，模拟操作系统区域选择行为\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
+  "t-table/active-row-action": {
+    "type": "event",
+    "description": "keyboard operation event actions. used to mock selection behavior, just like macOS or windows\n\n键盘操作事件。开启行高亮功能后，会自动开启键盘操作功能，如：通过键盘(Shift)或鼠标操作连续选中高亮行时触发，一般用于处理行选中等批量操作，模拟操作系统区域选择行为\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
+  "t-primary-table/column-resize-change": {
+    "type": "event",
+    "description": "列调整大小之后触发。`context.columnsWidth` 表示操作后各个列的宽度；\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
+  "t-table/column-resize-change": {
+    "type": "event",
+    "description": "列调整大小之后触发。`context.columnsWidth` 表示操作后各个列的宽度；\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
+  "t-primary-table/page-change": {
+    "type": "event",
+    "description": "trigger on pagination changing\n\n分页发生变化时触发。参数 newDataSource 表示分页后的数据。本地数据进行分页时，newDataSource 和源数据 data 会不一样。泛型 T 指表格数据类型\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
+  "t-table/page-change": {
+    "type": "event",
+    "description": "trigger on pagination changing\n\n分页发生变化时触发。参数 newDataSource 表示分页后的数据。本地数据进行分页时，newDataSource 和源数据 data 会不一样。泛型 T 指表格数据类型\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
+  "t-primary-table/row-click": {
+    "type": "event",
+    "description": "trigger on row click\n\n行点击时触发，泛型 T 指表格数据类型\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
+  "t-table/row-click": {
+    "type": "event",
+    "description": "trigger on row click\n\n行点击时触发，泛型 T 指表格数据类型\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
+  "t-primary-table/row-dblclick": {
+    "type": "event",
+    "description": "trigger on double click\n\n行双击时触发，泛型 T 指表格数据类型\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
+  "t-table/row-dblclick": {
+    "type": "event",
+    "description": "trigger on double click\n\n行双击时触发，泛型 T 指表格数据类型\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
+  "t-primary-table/row-mousedown": {
+    "type": "event",
+    "description": "trigger on row mousedown\n\n鼠标在表格行按下时触发，泛型 T 指表格数据类型\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
+  "t-table/row-mousedown": {
+    "type": "event",
+    "description": "trigger on row mousedown\n\n鼠标在表格行按下时触发，泛型 T 指表格数据类型\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
+  "t-primary-table/row-mouseenter": {
+    "type": "event",
+    "description": "trigger on row mouseenter\n\n鼠标在表格行进入时触发，泛型 T 指表格数据类型\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
+  "t-table/row-mouseenter": {
+    "type": "event",
+    "description": "trigger on row mouseenter\n\n鼠标在表格行进入时触发，泛型 T 指表格数据类型\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
+  "t-primary-table/row-mouseleave": {
+    "type": "event",
+    "description": "trigger on row mouseenter\n\n鼠标在表格行离开时触发，泛型 T 指表格数据类型\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
+  "t-table/row-mouseleave": {
+    "type": "event",
+    "description": "trigger on row mouseenter\n\n鼠标在表格行离开时触发，泛型 T 指表格数据类型\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
+  "t-primary-table/row-mouseover": {
+    "type": "event",
+    "description": "trigger on row mouseover\n\n鼠标悬浮到行时触发，泛型 T 指表格数据类型\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
+  "t-table/row-mouseover": {
+    "type": "event",
+    "description": "trigger on row mouseover\n\n鼠标悬浮到行时触发，泛型 T 指表格数据类型\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
+  "t-primary-table/row-mouseup": {
+    "type": "event",
+    "description": "trigger on row mouseup\n\n鼠标在表格行按下又弹起时触发，泛型 T 指表格数据类型\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
+  "t-table/row-mouseup": {
+    "type": "event",
+    "description": "trigger on row mouseup\n\n鼠标在表格行按下又弹起时触发，泛型 T 指表格数据类型\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
+  "t-primary-table/scroll-x": {
+    "type": "event",
+    "description": "trigger on scroll horizontal\n\n表格内容横向滚动时触发。请更为使用 `onScroll` 事件\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
+  "t-table/scroll-x": {
+    "type": "event",
+    "description": "trigger on scroll horizontal\n\n表格内容横向滚动时触发。请更为使用 `onScroll` 事件\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
+  "t-primary-table/scroll-y": {
+    "type": "event",
+    "description": "trigger on scroll vertical\n\n表格内容纵向滚动时触发。当内容超出高度(height)或最大高度(max-height)时，会出现纵向滚动条。请更为使用 `onScroll` 事件\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
+  "t-table/scroll-y": {
+    "type": "event",
+    "description": "trigger on scroll vertical\n\n表格内容纵向滚动时触发。当内容超出高度(height)或最大高度(max-height)时，会出现纵向滚动条。请更为使用 `onScroll` 事件\n\n[docs](https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events)"
+  },
   "t-progress/color": {
     "type": "String|Object|Array",
     "description": "进度条颜色。示例：'#ED7B2F' 或 'orange' 或 `['#f00', '#0ff', '#f0f']` 或 `{ '0%': '#f00', '100%': '#0ff' }` 或  `{ from: '#000', to: '#000' }` 等\n\ndefault: ''\n\n[docs](https://tdesign.tencent.com/vue-next/components/progress?tab=api#progress-props)"
@@ -7253,6 +7873,85 @@
     ],
     "description": "文字提示风格\n\ndefault: default\n\n[docs](https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props)"
   },
+  "t-tooltip/attach": {
+    "type": "String|Function",
+    "description": "指定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body\n\ndefault: 'body'\n\n[docs](https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props)"
+  },
+  "t-tooltip/content": {
+    "type": "String|TNode",
+    "description": "浮层里面的内容\n\n[docs](https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props)"
+  },
+  "t-tooltip/default": {
+    "type": "String|TNode",
+    "description": "触发元素，同 triggerElement\n\n[docs](https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props)"
+  },
+  "t-tooltip/disabled": {
+    "type": "Boolean",
+    "description": "是否禁用组件\n\n[docs](https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props)"
+  },
+  "t-tooltip/hide-empty-popup": {
+    "type": "Boolean",
+    "description": "浮层是否隐藏空内容，默认不隐藏\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props)"
+  },
+  "t-tooltip/overlay-class-name": {
+    "type": "String|Object|Array",
+    "description": "浮层类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`\n\n[docs](https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props)"
+  },
+  "t-tooltip/overlay-inner-class-name": {
+    "type": "String|Object|Array",
+    "description": "浮层内容部分类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`\n\n[docs](https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props)"
+  },
+  "t-tooltip/overlay-inner-style": {
+    "type": "Boolean|Object|Function",
+    "description": "浮层内容部分样式，第一个参数 `triggerElement` 表示触发元素 DOM 节点，第二个参数 `popupElement` 表示浮层元素 DOM 节点\n\n[docs](https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props)"
+  },
+  "t-tooltip/overlay-style": {
+    "type": "Boolean|Object|Function",
+    "description": "浮层样式，第一个参数 `triggerElement` 表示触发元素 DOM 节点，第二个参数 `popupElement` 表示浮层元素 DOM 节点\n\n[docs](https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props)"
+  },
+  "t-tooltip/popper-options": {
+    "type": "Object",
+    "description": "popper initial options，details refer to https://popper.js.org/docs\n\npopper 初始化配置，详情参考 https://popper.js.org/docs/\n\n[docs](https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props)"
+  },
+  "t-tooltip/trigger": {
+    "type": "String",
+    "options": [
+      "hover",
+      "click",
+      "focus",
+      "mousedown",
+      "context-menu"
+    ],
+    "description": "触发浮层出现的方式\n\ndefault: hover\n\n[docs](https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props)"
+  },
+  "t-tooltip/trigger-element": {
+    "type": "String|TNode",
+    "description": "触发元素。值类型为字符串表示元素选择器\n\n[docs](https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props)"
+  },
+  "t-tooltip/visible": {
+    "type": "Boolean",
+    "description": "是否显示浮层\n\n[docs](https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props)"
+  },
+  "t-tooltip/z-index": {
+    "type": "Number",
+    "description": "组件层级，Web 侧样式默认为 5500，移动端和小程序样式默认为 1500\n\n[docs](https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props)"
+  },
+  "t-tooltip/overlay-click": {
+    "type": "event",
+    "description": "trigger on popup content click\n\n内容面板点击时触发\n\n[docs](https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-events)"
+  },
+  "t-tooltip/scroll": {
+    "type": "event",
+    "description": "下拉选项滚动事件\n\n[docs](https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-events)"
+  },
+  "t-tooltip/scroll-to-bottom": {
+    "type": "event",
+    "description": "下拉滚动触底事件，常用于滚动到底执行具体业务逻辑\n\n[docs](https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-events)"
+  },
+  "t-tooltip/visible-change": {
+    "type": "event",
+    "description": "当浮层隐藏或显示时触发，`trigger=document` 表示点击非浮层元素触发；`trigger=context-menu` 表示右击触发\n\n[docs](https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-events)"
+  },
   "t-tooltip-lite/content": {
     "type": "String|TNode",
     "description": "tip content\n\n文字提示内容\n\n[docs](https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltiplite-props)"
diff --git a/packages/tdesign-vue-next/helper/tags.json b/packages/tdesign-vue-next/helper/tags.json
index 43fffd732..a8436914e 100644
--- a/packages/tdesign-vue-next/helper/tags.json
+++ b/packages/tdesign-vue-next/helper/tags.json
@@ -602,7 +602,18 @@
       "panel-click",
       "preset-click",
       "time-change",
-      "year-change"
+      "year-change",
+      "disable-date",
+      "disable-time",
+      "enable-time-picker",
+      "first-day-of-week",
+      "format",
+      "mode",
+      "need-confirm",
+      "presets",
+      "presets-placement",
+      "time-picker-props",
+      "value"
     ],
     "description": "DatePickerPanel\n\n日期选择器面板\n\n[docs](https://tdesign.tencent.com/vue-next/components/date-picker)"
   },
@@ -658,7 +669,17 @@
       "panel-click",
       "preset-click",
       "time-change",
-      "year-change"
+      "year-change",
+      "disable-date",
+      "enable-time-picker",
+      "first-day-of-week",
+      "format",
+      "mode",
+      "panel-preselection",
+      "presets",
+      "presets-placement",
+      "time-picker-props",
+      "value"
     ],
     "description": "DateRangePickerPanel\n\n日期范围选择器面板\n\n[docs](https://tdesign.tencent.com/vue-next/components/date-picker)"
   },
@@ -741,7 +762,15 @@
       "theme",
       "cancel",
       "close-btn-click",
-      "confirm"
+      "confirm",
+      "body",
+      "cancel-btn",
+      "close-btn",
+      "confirm-btn",
+      "confirm-loading",
+      "footer",
+      "header",
+      "theme"
     ],
     "description": "DialogCard\n\n对话框卡片\n\n[docs](https://tdesign.tencent.com/vue-next/components/dialog)"
   },
@@ -1412,7 +1441,67 @@
       "row-validate",
       "select-change",
       "sort-change",
-      "validate"
+      "validate",
+      "active-row-keys",
+      "active-row-type",
+      "allow-resize-column-width",
+      "attach",
+      "bordered",
+      "bottom-content",
+      "cell-empty-content",
+      "data",
+      "disable-data-page",
+      "disable-space-inactive-row",
+      "empty",
+      "first-full-row",
+      "fixed-rows",
+      "foot-data",
+      "footer-affix-props",
+      "footer-affixed-bottom",
+      "footer-summary",
+      "header-affix-props",
+      "header-affixed-top",
+      "height",
+      "horizontal-scroll-affixed-bottom",
+      "hover",
+      "keyboard-row-hover",
+      "last-full-row",
+      "lazy-load",
+      "loading",
+      "loading-props",
+      "locale",
+      "max-height",
+      "pagination",
+      "pagination-affixed-bottom",
+      "resizable",
+      "row-attributes",
+      "row-class-name",
+      "row-key",
+      "rowspan-and-colspan",
+      "rowspan-and-colspan-in-footer",
+      "scroll",
+      "show-header",
+      "size",
+      "stripe",
+      "table-content-width",
+      "table-layout",
+      "top-content",
+      "vertical-align",
+      "active-change",
+      "active-row-action",
+      "cell-click",
+      "column-resize-change",
+      "page-change",
+      "row-click",
+      "row-dblclick",
+      "row-mousedown",
+      "row-mouseenter",
+      "row-mouseleave",
+      "row-mouseover",
+      "row-mouseup",
+      "scroll",
+      "scroll-x",
+      "scroll-y"
     ],
     "description": "PrimaryTable\n\n主表格\n\n[docs](https://tdesign.tencent.com/vue-next/components/table)"
   },
@@ -1460,7 +1549,67 @@
       "row-validate",
       "select-change",
       "sort-change",
-      "validate"
+      "validate",
+      "active-row-keys",
+      "active-row-type",
+      "allow-resize-column-width",
+      "attach",
+      "bordered",
+      "bottom-content",
+      "cell-empty-content",
+      "data",
+      "disable-data-page",
+      "disable-space-inactive-row",
+      "empty",
+      "first-full-row",
+      "fixed-rows",
+      "foot-data",
+      "footer-affix-props",
+      "footer-affixed-bottom",
+      "footer-summary",
+      "header-affix-props",
+      "header-affixed-top",
+      "height",
+      "horizontal-scroll-affixed-bottom",
+      "hover",
+      "keyboard-row-hover",
+      "last-full-row",
+      "lazy-load",
+      "loading",
+      "loading-props",
+      "locale",
+      "max-height",
+      "pagination",
+      "pagination-affixed-bottom",
+      "resizable",
+      "row-attributes",
+      "row-class-name",
+      "row-key",
+      "rowspan-and-colspan",
+      "rowspan-and-colspan-in-footer",
+      "scroll",
+      "show-header",
+      "size",
+      "stripe",
+      "table-content-width",
+      "table-layout",
+      "top-content",
+      "vertical-align",
+      "active-change",
+      "active-row-action",
+      "cell-click",
+      "column-resize-change",
+      "page-change",
+      "row-click",
+      "row-dblclick",
+      "row-mousedown",
+      "row-mouseenter",
+      "row-mouseleave",
+      "row-mouseover",
+      "row-mouseup",
+      "scroll",
+      "scroll-x",
+      "scroll-y"
     ],
     "description": "PrimaryTable\n\n主表格\n\n[docs](https://tdesign.tencent.com/vue-next/components/table)"
   },
@@ -2142,7 +2291,25 @@
       "duration",
       "placement",
       "show-arrow",
-      "theme"
+      "theme",
+      "attach",
+      "content",
+      "default",
+      "disabled",
+      "hide-empty-popup",
+      "overlay-class-name",
+      "overlay-inner-class-name",
+      "overlay-inner-style",
+      "overlay-style",
+      "popper-options",
+      "trigger",
+      "trigger-element",
+      "visible",
+      "z-index",
+      "overlay-click",
+      "scroll",
+      "scroll-to-bottom",
+      "visible-change"
     ],
     "description": "Tooltip\n\n文字提示\n\n[docs](https://tdesign.tencent.com/vue-next/components/tooltip)"
   },
diff --git a/packages/tdesign-vue-next/helper/web-types.json b/packages/tdesign-vue-next/helper/web-types.json
index b4ea81ab7..9aad4f772 100644
--- a/packages/tdesign-vue-next/helper/web-types.json
+++ b/packages/tdesign-vue-next/helper/web-types.json
@@ -4464,6 +4464,141 @@
               "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#datepickerpanel-props",
               "type": "string",
               "default": "'00:00:00'"
+            },
+            {
+              "name": "disable-date",
+              "description": "禁用日期，示例：['A', 'B'] 表示日期 A 和日期 B 会被禁用。`{ from: 'A', to: 'B' }` 表示在 A 到 B 之间的日期会被禁用。`{ before: 'A', after: 'B' }` 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01'，B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#datepickerpanel-props",
+              "type": "DisableDate"
+            },
+            {
+              "name": "disable-time",
+              "description": "disable time config function\n\n禁用时间项的配置函数，仅在日期时间选择器中可用",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#datepickerpanel-props",
+              "type": "(time: Date) => Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number>, millisecond: Array<number> }>"
+            },
+            {
+              "name": "enable-time-picker",
+              "description": "是否显示时间选择",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#datepickerpanel-props",
+              "type": "boolean",
+              "default": "false"
+            },
+            {
+              "name": "first-day-of-week",
+              "description": "第一天从星期几开始",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#datepickerpanel-props",
+              "type": "number",
+              "attribute-value": {
+                "type": "of-match"
+              },
+              "values": [
+                {
+                  "name": "1"
+                },
+                {
+                  "name": "2"
+                },
+                {
+                  "name": "3"
+                },
+                {
+                  "name": "4"
+                },
+                {
+                  "name": "5"
+                },
+                {
+                  "name": "6"
+                },
+                {
+                  "name": "7"
+                }
+              ]
+            },
+            {
+              "name": "format",
+              "description": "仅用于格式化日期显示的格式，不影响日期值。注意和 `valueType` 的区别，`valueType`会直接决定日期值 `value` 的格式。全局配置默认为：'YYYY-MM-DD'，[详细文档](https://day.js.org/docs/en/display/format)",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#datepickerpanel-props",
+              "type": "string",
+              "default": "undefined"
+            },
+            {
+              "name": "mode",
+              "description": "选择器模式",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#datepickerpanel-props",
+              "type": "'year' | 'quarter' | 'month' | 'week' | 'date'",
+              "default": "date",
+              "attribute-value": {
+                "type": "enum"
+              },
+              "values": [
+                {
+                  "name": "year"
+                },
+                {
+                  "name": "quarter"
+                },
+                {
+                  "name": "month"
+                },
+                {
+                  "name": "week"
+                },
+                {
+                  "name": "date"
+                }
+              ]
+            },
+            {
+              "name": "need-confirm",
+              "description": "whether a confirmation button needs to be clicked to complete the action in the date-time picker scenario, default is true\n\n决定在日期时间选择器的场景下是否需要点击确认按钮才完成选择动作，默认为`true`",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#datepickerpanel-props",
+              "type": "boolean",
+              "default": "true"
+            },
+            {
+              "name": "presets",
+              "description": "预设快捷日期选择，示例：`{ '元旦': '2021-01-01', '昨天':  dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#datepickerpanel-props",
+              "type": "PresetDate"
+            },
+            {
+              "name": "presets-placement",
+              "description": "预设面板展示区域（包含确定按钮）",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#datepickerpanel-props",
+              "type": "'left' | 'top' | 'right' | 'bottom'",
+              "default": "bottom",
+              "attribute-value": {
+                "type": "enum"
+              },
+              "values": [
+                {
+                  "name": "left"
+                },
+                {
+                  "name": "top"
+                },
+                {
+                  "name": "right"
+                },
+                {
+                  "name": "bottom"
+                }
+              ]
+            },
+            {
+              "name": "time-picker-props",
+              "description": "透传 TimePicker 组件属性",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#datepickerpanel-props",
+              "type": "TimePickerProps"
+            },
+            {
+              "name": "value",
+              "description": "选中值",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#datepickerpanel-props",
+              "type": "DateValue | DateMultipleValue",
+              "default": "''"
             }
           ],
           "js": {
@@ -4927,112 +5062,240 @@
               "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-props",
               "type": "string[]",
               "default": "[\"00:00:00\", \"23:59:59\"]"
-            }
-          ],
-          "js": {
-            "events": [
-              {
-                "name": "cell-click",
-                "description": "点击日期单元格时触发",
-                "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-events"
-              },
-              {
-                "name": "change",
-                "description": "选中值发生变化时触发。参数 `context.trigger` 表示触发当前事件的来源，不同的模式触发来源也会不同",
-                "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-events"
-              },
-              {
-                "name": "confirm",
-                "description": "如果存在“确定”按钮，则点击“确定”按钮时触发",
-                "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-events"
-              },
-              {
-                "name": "month-change",
-                "description": "月份切换发生变化时触发",
-                "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-events"
-              },
-              {
-                "name": "panel-click",
-                "description": "点击面板时触发",
-                "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-events"
-              },
-              {
-                "name": "preset-click",
-                "description": "点击预设按钮后触发",
-                "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-events"
-              },
-              {
-                "name": "time-change",
-                "description": "时间切换发生变化时触发",
-                "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-events"
-              },
-              {
-                "name": "year-change",
-                "description": "年份切换发生变化时触发",
-                "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-events"
-              }
-            ]
-          },
-          "slots": []
-        },
-        {
-          "name": "t-descriptions",
-          "source": {
-            "symbol": "Descriptions"
-          },
-          "description": "Descriptions\n\n描述列表",
-          "doc-url": "https://tdesign.tencent.com/vue-next/components/descriptions",
-          "props": [
-            {
-              "name": "bordered",
-              "description": "set description list with grey border\n\n是否带边框",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/descriptions?tab=api#descriptions-props",
-              "type": "boolean",
-              "default": "false"
-            },
-            {
-              "name": "colon",
-              "description": "set label with \":\" on the right\n\n字段名右侧是否携带冒号“：”",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/descriptions?tab=api#descriptions-props",
-              "type": "boolean"
             },
             {
-              "name": "column",
-              "description": "count of DescriptionsItem in one row\n\n一行 `DescriptionsItem` 的数量",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/descriptions?tab=api#descriptions-props",
-              "type": "number",
-              "default": "2"
+              "name": "disable-date",
+              "description": "禁用日期，示例：['A', 'B'] 表示日期 A 和日期 B 会被禁用。{ from: 'A', to: 'B' } 表示在 A 到 B 之间的日期会被禁用。{ before: 'A', after: 'B' } 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01'，B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-props",
+              "type": "DisableRangeDate"
             },
             {
-              "name": "content-style",
-              "description": "style of description content\n\n自定义描述项内容的样式",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/descriptions?tab=api#descriptions-props",
-              "type": "Styles"
+              "name": "enable-time-picker",
+              "description": "是否显示时间选择",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-props",
+              "type": "boolean",
+              "default": "false"
             },
             {
-              "name": "item-layout",
-              "description": "layout direction of description item\n\n描述项的排列方向",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/descriptions?tab=api#descriptions-props",
-              "type": "'horizontal' | 'vertical'",
-              "default": "horizontal",
+              "name": "first-day-of-week",
+              "description": "第一天从星期几开始",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-props",
+              "type": "number",
               "attribute-value": {
-                "type": "enum"
+                "type": "of-match"
               },
               "values": [
                 {
-                  "name": "horizontal"
+                  "name": "1"
                 },
                 {
-                  "name": "vertical"
+                  "name": "2"
+                },
+                {
+                  "name": "3"
+                },
+                {
+                  "name": "4"
+                },
+                {
+                  "name": "5"
+                },
+                {
+                  "name": "6"
+                },
+                {
+                  "name": "7"
                 }
               ]
             },
             {
-              "name": "items",
-              "description": "list of descriptions items\n\n描述项的列表",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/descriptions?tab=api#descriptions-props",
-              "type": "Array<TdDescriptionsItemProps>"
-            },
+              "name": "format",
+              "description": "用于格式化日期，[详细文档](https://day.js.org/docs/en/display/format)",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-props",
+              "type": "string"
+            },
+            {
+              "name": "mode",
+              "description": "选择器模式",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-props",
+              "type": "'year' | 'quarter' | 'month' | 'week' | 'date'",
+              "default": "date",
+              "attribute-value": {
+                "type": "enum"
+              },
+              "values": [
+                {
+                  "name": "year"
+                },
+                {
+                  "name": "quarter"
+                },
+                {
+                  "name": "month"
+                },
+                {
+                  "name": "week"
+                },
+                {
+                  "name": "date"
+                }
+              ]
+            },
+            {
+              "name": "panel-preselection",
+              "description": "在开始日期选中之前，面板是否显示预选状态，即是否高亮预选日期",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-props",
+              "type": "boolean",
+              "default": "true"
+            },
+            {
+              "name": "presets",
+              "description": "预设快捷日期选择，示例：{ '特定日期范围': ['2021-01-01', '2022-01-01'], '本月': [dayjs().startOf('month'), dayjs().endOf('month')] }",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-props",
+              "type": "PresetRange"
+            },
+            {
+              "name": "presets-placement",
+              "description": "预设面板展示区域（包含确定按钮）",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-props",
+              "type": "'left' | 'top' | 'right' | 'bottom'",
+              "default": "bottom",
+              "attribute-value": {
+                "type": "enum"
+              },
+              "values": [
+                {
+                  "name": "left"
+                },
+                {
+                  "name": "top"
+                },
+                {
+                  "name": "right"
+                },
+                {
+                  "name": "bottom"
+                }
+              ]
+            },
+            {
+              "name": "time-picker-props",
+              "description": "透传 TimePicker 组件属性",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-props",
+              "type": "TimePickerProps"
+            },
+            {
+              "name": "value",
+              "description": "选中值",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-props",
+              "type": "DateRangeValue",
+              "default": "[]"
+            }
+          ],
+          "js": {
+            "events": [
+              {
+                "name": "cell-click",
+                "description": "点击日期单元格时触发",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-events"
+              },
+              {
+                "name": "change",
+                "description": "选中值发生变化时触发。参数 `context.trigger` 表示触发当前事件的来源，不同的模式触发来源也会不同",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-events"
+              },
+              {
+                "name": "confirm",
+                "description": "如果存在“确定”按钮，则点击“确定”按钮时触发",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-events"
+              },
+              {
+                "name": "month-change",
+                "description": "月份切换发生变化时触发",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-events"
+              },
+              {
+                "name": "panel-click",
+                "description": "点击面板时触发",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-events"
+              },
+              {
+                "name": "preset-click",
+                "description": "点击预设按钮后触发",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-events"
+              },
+              {
+                "name": "time-change",
+                "description": "时间切换发生变化时触发",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-events"
+              },
+              {
+                "name": "year-change",
+                "description": "年份切换发生变化时触发",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/date-picker?tab=api#daterangepickerpanel-events"
+              }
+            ]
+          },
+          "slots": []
+        },
+        {
+          "name": "t-descriptions",
+          "source": {
+            "symbol": "Descriptions"
+          },
+          "description": "Descriptions\n\n描述列表",
+          "doc-url": "https://tdesign.tencent.com/vue-next/components/descriptions",
+          "props": [
+            {
+              "name": "bordered",
+              "description": "set description list with grey border\n\n是否带边框",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/descriptions?tab=api#descriptions-props",
+              "type": "boolean",
+              "default": "false"
+            },
+            {
+              "name": "colon",
+              "description": "set label with \":\" on the right\n\n字段名右侧是否携带冒号“：”",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/descriptions?tab=api#descriptions-props",
+              "type": "boolean"
+            },
+            {
+              "name": "column",
+              "description": "count of DescriptionsItem in one row\n\n一行 `DescriptionsItem` 的数量",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/descriptions?tab=api#descriptions-props",
+              "type": "number",
+              "default": "2"
+            },
+            {
+              "name": "content-style",
+              "description": "style of description content\n\n自定义描述项内容的样式",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/descriptions?tab=api#descriptions-props",
+              "type": "Styles"
+            },
+            {
+              "name": "item-layout",
+              "description": "layout direction of description item\n\n描述项的排列方向",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/descriptions?tab=api#descriptions-props",
+              "type": "'horizontal' | 'vertical'",
+              "default": "horizontal",
+              "attribute-value": {
+                "type": "enum"
+              },
+              "values": [
+                {
+                  "name": "horizontal"
+                },
+                {
+                  "name": "vertical"
+                }
+              ]
+            },
+            {
+              "name": "items",
+              "description": "list of descriptions items\n\n描述项的列表",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/descriptions?tab=api#descriptions-props",
+              "type": "Array<TdDescriptionsItemProps>"
+            },
             {
               "name": "label-style",
               "description": "style of description item, which takes effect when `tableLayout` is `auto`\n\n自定义描述项标签的样式，需要配合 `tableLayout` 为 `auto` 才可以生效",
@@ -5584,74 +5847,192 @@
                   "name": "success"
                 }
               ]
-            }
-          ],
-          "js": {
-            "events": [
-              {
-                "name": "cancel",
-                "description": "如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件",
-                "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-events"
-              },
-              {
-                "name": "close-btn-click",
-                "description": "点击右上角关闭按钮时触发",
-                "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-events"
-              },
-              {
-                "name": "confirm",
-                "description": "如果“确认”按钮存在，则点击“确认”按钮时触发，或者键盘按下回车键时触发",
-                "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-events"
-              }
-            ]
-          },
-          "slots": [
+            },
             {
               "name": "body",
               "description": "对话框内容",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props"
-            },
-            {
-              "name": "cancelBtn",
-              "description": "取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件类型和参数：string | ButtonProps | TNode | null【import { ButtonProps } from '@Button'】",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props"
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props",
+              "type": "string | TNode"
             },
             {
               "name": "cancel-btn",
-              "description": "取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件类型和参数：string | ButtonProps | TNode | null【import { ButtonProps } from '@Button'】",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props"
-            },
-            {
-              "name": "closeBtn",
-              "description": "关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例类型和参数：string | ButtonProps | TNode | null【import { ButtonProps } from '@Button'】",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props"
+              "description": "取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props",
+              "type": "string | ButtonProps | TNode | null"
             },
             {
               "name": "close-btn",
-              "description": "关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例类型和参数：string | ButtonProps | TNode | null【import { ButtonProps } from '@Button'】",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props"
+              "description": "关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props",
+              "type": "string | boolean | TNode",
+              "default": "true"
             },
             {
-              "name": "confirmBtn",
-              "description": "确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件类型和参数：string | ButtonProps | TNode | null",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props"
+              "name": "confirm-btn",
+              "description": "确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props",
+              "type": "string | ButtonProps | TNode | null"
             },
             {
-              "name": "confirm-btn",
-              "description": "确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件类型和参数：string | ButtonProps | TNode | null",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props"
+              "name": "confirm-loading",
+              "description": "confirm button loading status\n\n确认按钮加载状态",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props",
+              "type": "boolean",
+              "default": "undefined"
             },
             {
               "name": "footer",
               "description": "底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 不显示任何内容，值类型为 Function 表示自定义底部内容",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props"
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props",
+              "type": "boolean | TNode",
+              "default": "true"
             },
             {
               "name": "header",
               "description": "头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 string 则直接显示值，值类型为 Function 表示自定义头部内容",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props"
-            }
-          ]
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props",
+              "type": "string | boolean | TNode",
+              "default": "true"
+            },
+            {
+              "name": "theme",
+              "description": "对话框风格",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props",
+              "type": "'default' | 'info' | 'warning' | 'danger' | 'success'",
+              "default": "default",
+              "attribute-value": {
+                "type": "enum"
+              },
+              "values": [
+                {
+                  "name": "default"
+                },
+                {
+                  "name": "info"
+                },
+                {
+                  "name": "warning"
+                },
+                {
+                  "name": "danger"
+                },
+                {
+                  "name": "success"
+                }
+              ]
+            }
+          ],
+          "js": {
+            "events": [
+              {
+                "name": "cancel",
+                "description": "如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-events"
+              },
+              {
+                "name": "close-btn-click",
+                "description": "点击右上角关闭按钮时触发",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-events"
+              },
+              {
+                "name": "confirm",
+                "description": "如果“确认”按钮存在，则点击“确认”按钮时触发，或者键盘按下回车键时触发",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-events"
+              }
+            ]
+          },
+          "slots": [
+            {
+              "name": "body",
+              "description": "对话框内容",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props"
+            },
+            {
+              "name": "cancelBtn",
+              "description": "取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件类型和参数：string | ButtonProps | TNode | null【import { ButtonProps } from '@Button'】",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props"
+            },
+            {
+              "name": "cancel-btn",
+              "description": "取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件类型和参数：string | ButtonProps | TNode | null【import { ButtonProps } from '@Button'】",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props"
+            },
+            {
+              "name": "closeBtn",
+              "description": "关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例类型和参数：string | ButtonProps | TNode | null【import { ButtonProps } from '@Button'】",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props"
+            },
+            {
+              "name": "close-btn",
+              "description": "关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例类型和参数：string | ButtonProps | TNode | null【import { ButtonProps } from '@Button'】",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props"
+            },
+            {
+              "name": "confirmBtn",
+              "description": "确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件类型和参数：string | ButtonProps | TNode | null",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props"
+            },
+            {
+              "name": "confirm-btn",
+              "description": "确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件类型和参数：string | ButtonProps | TNode | null",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props"
+            },
+            {
+              "name": "footer",
+              "description": "底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 不显示任何内容，值类型为 Function 表示自定义底部内容",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props"
+            },
+            {
+              "name": "header",
+              "description": "头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 string 则直接显示值，值类型为 Function 表示自定义头部内容",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props"
+            },
+            {
+              "name": "body",
+              "description": "对话框内容",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props"
+            },
+            {
+              "name": "cancelBtn",
+              "description": "取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件类型和参数：string | ButtonProps | TNode | null【import { ButtonProps } from '@Button'】",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props"
+            },
+            {
+              "name": "cancel-btn",
+              "description": "取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件类型和参数：string | ButtonProps | TNode | null【import { ButtonProps } from '@Button'】",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props"
+            },
+            {
+              "name": "closeBtn",
+              "description": "关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props"
+            },
+            {
+              "name": "close-btn",
+              "description": "关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props"
+            },
+            {
+              "name": "confirmBtn",
+              "description": "确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件类型和参数：string | ButtonProps | TNode | null",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props"
+            },
+            {
+              "name": "confirm-btn",
+              "description": "确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件类型和参数：string | ButtonProps | TNode | null",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props"
+            },
+            {
+              "name": "footer",
+              "description": "底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 不显示任何内容，值类型为 Function 表示自定义底部内容",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props"
+            },
+            {
+              "name": "header",
+              "description": "头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 string 则直接显示值，值类型为 Function 表示自定义头部内容",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/dialog?tab=api#dialogcard-props"
+            }
+          ]
         },
         {
           "name": "t-divider",
@@ -10504,365 +10885,1168 @@
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
               "type": "boolean",
               "default": "false"
-            }
-          ],
-          "js": {
-            "events": [
-              {
-                "name": "async-loading-click",
-                "description": "trigger on async loading text clicked\n\n异步加载区域被点击时触发",
-                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
-              },
-              {
-                "name": "cell-click",
-                "description": "trigger on cell clicked\n\n单元格点击时触发",
-                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
-              },
-              {
-                "name": "change",
-                "description": "分页、排序、过滤等内容变化时触发，泛型 T 指表格数据类型，`currentData` 表示变化后的数据",
-                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
-              },
-              {
-                "name": "column-change",
-                "description": "确认操作之前列配置发生变化时触发。`context.columns` 表示已选中的列；`context.currentColumn` 表示本次变化操作的列，值不存在表示全选操作；`context.type` 表示当前操作属于选中列或是取消列",
-                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
-              },
-              {
-                "name": "column-controller-visible-change",
-                "description": "列配置弹窗显示或隐藏变化时触发",
-                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
-              },
-              {
-                "name": "data-change",
-                "description": "trigger on data changing\n\n本地数据排序导致 `data` 变化时触发，第一个参数指变化后的数据，第二个参数 `context.trigger` 表示触发本次变化的来源",
-                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
-              },
-              {
-                "name": "display-columns-change",
-                "description": "确认列配置时触发",
-                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
-              },
-              {
-                "name": "drag-sort",
-                "description": "trigger on drag sort\n\n拖拽排序时触发，`data` 表示排序前的数据，`newData` 表示拖拽排序结束后的新数据，`sort=row` 表示行拖拽事件触发，`sort=col` 表示列拖拽事件触发",
-                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
-              },
-              {
-                "name": "expand-change",
-                "description": "trigger on expand row keys changing\n\n展开行发生变化时触发，泛型 T 指表格数据类型",
-                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
-              },
-              {
-                "name": "filter-change",
-                "description": "trigger on filter value changing\n\n过滤参数发生变化时触发，泛型 T 指表格数据类型",
-                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
-              },
-              {
-                "name": "row-edit",
-                "description": "trigger on row data is editing\n\n行编辑时触发",
-                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
-              },
-              {
-                "name": "row-validate",
-                "description": "trigger after row data validated\n\n行编辑校验完成后触发，即组件实例方法 `validateRowData` 执行结束后触发。`result` 表示校验结果，`trigger=self` 表示编辑组件内部触发的校验，`trigger='parent'` 表示表格父组件触发的校验",
-                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
-              },
-              {
-                "name": "select-change",
-                "description": "trigger on select changing\n\n选中行发生变化时触发，泛型 T 指表格数据类型。两个参数，第一个参数为选中行 keys，第二个参数为更多参数，具体如下：`type = uncheck` 表示当前行操作为「取消行选中」；`type = check` 表示当前行操作为「行选中」； `currentRowKey` 表示当前操作行的 rowKey 值； `currentRowData` 表示当前操作行的行数据",
-                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
-              },
-              {
-                "name": "sort-change",
-                "description": "trigger on sort changing\n\n排序发生变化时触发。其中 sortBy 表示当前排序的字段，sortType 表示排序的方式，currentDataSource 表示 sorter 排序后的结果，col 表示列配置。sort 值类型为数组时表示多字段排序",
-                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
-              },
-              {
-                "name": "validate",
-                "description": "trigger after row data validated\n\n可编辑行表格，全部数据校验完成后触发。即组件实例方法 `validateTableData` 执行结束后触发",
-                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
-              }
-            ]
-          },
-          "slots": [
+            },
             {
-              "name": "asyncLoading",
-              "description": "async loading state\n\n异步加载状态。值为 `loading` 显示默认文字 “正在加载中，请稍后”，值为 `loading-more` 显示“点击加载更多”，值为其他，表示完全自定义异步加载区域内容类型和参数：'loading' | 'load-more' | TNode",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+              "name": "active-row-keys",
+              "description": "keys of highlight rows, used to mock area selection behavior, just like macOS or windows area selection\n\n高亮行，支持鼠标键盘操作(Shift)连续高亮行，可用于处理行选中等批量操作，模拟操作系统区域选择行为",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "Array<string | number>",
+              "default": "[]"
             },
             {
-              "name": "async-loading",
-              "description": "async loading state\n\n异步加载状态。值为 `loading` 显示默认文字 “正在加载中，请稍后”，值为 `loading-more` 显示“点击加载更多”，值为其他，表示完全自定义异步加载区域内容类型和参数：'loading' | 'load-more' | TNode",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+              "name": "active-row-type",
+              "description": "make nodes can be highlight on clicked\n\n默认不会高亮点击行，`activeRowType=single` 表示鼠标点击仅允许同时高亮一行，Shift 键盘操作加鼠标操作依然可以高亮多行，因为这属于明显的区域选择行为。`activeRowType= multiple ` 表示允许鼠标点击同时高亮多行",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "'single' | 'multiple'"
             },
             {
-              "name": "expandIcon",
-              "description": "to show expand icon. expand icon is set in first column\n\n用于控制是否显示「展开图标列」，值为 `false` 则不会显示。可以精确到某一行是否显示，还可以自定义展开图标内容。`expandedRow` 存在时，该参数有效。支持全局配置 `GlobalConfigProvider`类型和参数：boolean | TNode<ExpandArrowRenderParams<T>>【interface ExpandArrowRenderParams<T> { row: T; index: number }】",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+              "name": "allow-resize-column-width",
+              "description": "allow to resize column width\n\n是否允许调整列宽。请更为使用 `resizable`",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean",
+              "default": "undefined"
             },
             {
-              "name": "expand-icon",
-              "description": "to show expand icon. expand icon is set in first column\n\n用于控制是否显示「展开图标列」，值为 `false` 则不会显示。可以精确到某一行是否显示，还可以自定义展开图标内容。`expandedRow` 存在时，该参数有效。支持全局配置 `GlobalConfigProvider`类型和参数：boolean | TNode<ExpandArrowRenderParams<T>>【interface ExpandArrowRenderParams<T> { row: T; index: number }】",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+              "name": "attach",
+              "description": "elements with popup would be attached to `attach`\n\n超出省略等所有浮层元素统一绑定到 `attach`，可根据实际情况调整挂载元素",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "AttachNode"
             },
             {
-              "name": "expandedRow",
-              "description": "table expanded row, to show more detail information\n\n展开行内容，泛型 T 指表格数据类型类型和参数：TNode<TableExpandedRowParams<T>>【interface TableExpandedRowParams<T> { row: T; index: number; columns: PrimaryTableCol<T>[] | BaseTableCol<T>[] }】",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+              "name": "bordered",
+              "description": "show table bordered\n\n是否显示表格边框",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean",
+              "default": "false"
             },
             {
-              "name": "expanded-row",
-              "description": "table expanded row, to show more detail information\n\n展开行内容，泛型 T 指表格数据类型类型和参数：TNode<TableExpandedRowParams<T>>【interface TableExpandedRowParams<T> { row: T; index: number; columns: PrimaryTableCol<T>[] | BaseTableCol<T>[] }】",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+              "name": "bottom-content",
+              "description": "表格底部内容，可以用于自定义列设置等",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "string | TNode"
             },
             {
-              "name": "filterIcon",
-              "description": "filter icon\n\n自定义过滤图标，支持全局配置 `GlobalConfigProvider`类型和参数：TNode<{ col: PrimaryTableCol<T>; colIndex: number }>",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+              "name": "cell-empty-content",
+              "description": "单元格数据为空时呈现的内容",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "string | TNode<BaseTableCellParams<T>>"
             },
             {
-              "name": "filter-icon",
-              "description": "filter icon\n\n自定义过滤图标，支持全局配置 `GlobalConfigProvider`类型和参数：TNode<{ col: PrimaryTableCol<T>; colIndex: number }>",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+              "name": "data",
+              "description": "table data\n\n数据源，泛型 T 指表格数据类型",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "Array<T>",
+              "default": "[]"
             },
             {
-              "name": "filterRow",
-              "description": "filter value\n\n自定义过滤状态行及清空筛选等",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+              "name": "disable-data-page",
+              "description": "是否禁用本地数据分页。当 `data` 数据长度超过分页大小时，会自动进行本地数据分页。如果 `disableDataPage` 设置为 true，则无论何时，都不会进行本地数据分页",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean",
+              "default": "false"
             },
             {
-              "name": "filter-row",
-              "description": "filter value\n\n自定义过滤状态行及清空筛选等",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+              "name": "disable-space-inactive-row",
+              "description": "can not set row to be inactive with Space keydown\n\n默认重复按下 Space 键可取消当前行高亮，是否禁用取消",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean",
+              "default": "undefined"
             },
             {
-              "name": "sortIcon",
-              "description": "sort icon\n\n自定义排序图标，支持全局配置 `GlobalConfigProvider`",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+              "name": "empty",
+              "description": "empty text or empty element\n\n空表格呈现样式，支持全局配置 `GlobalConfigProvider`",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "string | TNode",
+              "default": "''"
             },
             {
-              "name": "sort-icon",
-              "description": "sort icon\n\n自定义排序图标，支持全局配置 `GlobalConfigProvider`",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
-            }
-          ]
-        },
-        {
-          "name": "t-table",
-          "source": {
-            "symbol": "PrimaryTable"
-          },
-          "description": "PrimaryTable\n\n主表格",
-          "doc-url": "https://tdesign.tencent.com/vue-next/components/table",
-          "props": [
+              "name": "first-full-row",
+              "description": "首行内容，横跨所有列",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "string | TNode"
+            },
             {
-              "name": "async-loading",
-              "description": "async loading state\n\n异步加载状态。值为 `loading` 显示默认文字 “正在加载中，请稍后”，值为 `loading-more` 显示“点击加载更多”，值为其他，表示完全自定义异步加载区域内容",
+              "name": "fixed-rows",
+              "description": "固定行（冻结行），示例：[M, N]，表示冻结表头 M 行和表尾 N 行。M 和 N 值为 0 时，表示不冻结行",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
-              "type": "'loading' | 'load-more' | TNode"
+              "type": "Array<number>"
             },
             {
-              "name": "column-controller",
-              "description": "自定义显示列控制器，值为空不会显示。具体属性请看下方 `TableColumnController` 文档",
+              "name": "foot-data",
+              "description": "table foot data\n\n表尾数据源，泛型 T 指表格数据类型",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
-              "type": "TableColumnController"
+              "type": "Array<T>",
+              "default": "[]"
             },
             {
-              "name": "column-controller-visible",
-              "description": "是否显示列配置弹框控制器，只要该属性值不为 `undefined`，弹框的显示/隐藏完全由该属性控制",
+              "name": "footer-affix-props",
+              "description": "affix props\n\n请更为使用 `footerAffixedBottom`。表尾吸底基于 Affix 组件开发，透传全部 Affix 组件属性",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "Partial<AffixProps>"
+            },
+            {
+              "name": "footer-affixed-bottom",
+              "description": "affix foot to viewport bottom\n\n表尾吸底。使用该功能，需要非常注意表格是相对于哪一个父元素进行滚动。值为 `true`，则表示相对于整个窗口吸底。如果表格滚动的父元素不是整个窗口，请通过 `footerAffixedBottom.container` 调整固钉的吸顶范围。基于 Affix 组件开发，透传全部 Affix 组件属性",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean | Partial<AffixProps>",
+              "default": "false"
+            },
+            {
+              "name": "footer-summary",
+              "description": "footer summary content\n\n表尾总结行",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "string | TNode"
+            },
+            {
+              "name": "header-affix-props",
+              "description": "affix props\n\n请更为使用 `headerAffixedTop`。表头吸顶基于 Affix 组件开发，透传全部 Affix 组件属性",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "Partial<AffixProps>"
+            },
+            {
+              "name": "header-affixed-top",
+              "description": "affix header to viewport top\n\n表头吸顶。使用该功能，需要非常注意表格是相对于哪一个父元素进行滚动。值为 `true`，表示相对于整个窗口吸顶。如果表格滚动的父元素不是整个窗口，请通过 `headerAffixedTop.container` 调整吸顶的位置。基于 Affix 组件开发，透传全部 Affix 组件属性",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean | Partial<AffixProps>",
+              "default": "false"
+            },
+            {
+              "name": "height",
+              "description": "table height\n\n表格高度，超出后会出现滚动条。示例：100,  '30%',  '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight`",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "string | number"
+            },
+            {
+              "name": "horizontal-scroll-affixed-bottom",
+              "description": "affix props\n\n滚动条吸底。基于 Affix 组件开发，透传全部 Affix 组件属性",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean | Partial<AffixProps>"
+            },
+            {
+              "name": "hover",
+              "description": "show hover style\n\n是否显示鼠标悬浮状态",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean",
+              "default": "false"
+            },
+            {
+              "name": "keyboard-row-hover",
+              "description": "make table row to be hover by keydown ArrowUp/ArrowDown\n\n键盘操作行显示悬浮效果，一般用于键盘操作行选中、行展开、行高亮等功能",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean",
+              "default": "true"
+            },
+            {
+              "name": "last-full-row",
+              "description": "尾行内容，横跨所有列",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "string | TNode"
+            },
+            {
+              "name": "lazy-load",
+              "description": "load table content when it entering the visible area, all elements in table are not rendered before it become visible\n\n是否启用整个表格元素的懒加载，当页面滚动到可视区域后再渲染表格。注意和表格内部行滚动懒加载的区别，内部行滚动无论表格是否在可视区域都会默认渲染第一屏的行元素",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
               "type": "boolean",
+              "default": "false"
+            },
+            {
+              "name": "loading",
+              "description": "loading state table\n\n加载中状态。值为 `true` 会显示默认加载中样式，可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。值为 `false` 则会取消加载状态",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean | TNode",
               "default": "undefined"
             },
             {
-              "name": "columns",
-              "description": "table column configs\n\n列配置，泛型 T 指表格数据类型",
+              "name": "loading-props",
+              "description": "透传加载组件全部属性",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
-              "type": "Array<PrimaryTableCol<T>>",
-              "default": "[]"
+              "type": "Partial<LoadingProps>"
             },
             {
-              "name": "display-columns",
-              "description": "列配置功能中，当前显示的列",
+              "name": "locale",
+              "description": "table locale config\n\n语言配置",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
-              "type": "CheckboxGroupValue"
+              "type": "TableConfig"
             },
             {
-              "name": "drag-sort",
-              "description": "dag sort\n\n拖拽排序方式，值为 `row` 表示行拖拽排序，这种方式无法进行文本复制，慎用。值为`row-handler` 表示通过拖拽手柄进行行拖拽排序。值为 `col` 表示列顺序拖拽。值为 `row-handler-col` 表示同时支持行拖拽和列拖拽。⚠️`drag-col` 已废弃，请勿使用",
+              "name": "max-height",
+              "description": "table max height\n\n表格最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
-              "type": "'row' | 'row-handler' | 'col' | 'row-handler-col' | 'drag-col'",
+              "type": "string | number"
+            },
+            {
+              "name": "pagination",
+              "description": "you can use all props of pagination component with paginationProps\n\n分页配置，值为空则不显示。具体 API 参考分页组件。当 `data` 数据长度超过分页大小时，会自动对本地数据 `data` 进行排序，如果不希望对于 `data` 进行排序，可以设置 `disableDataPage = true`",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "PaginationProps"
+            },
+            {
+              "name": "pagination-affixed-bottom",
+              "description": "affix props\n\n分页吸底。基于 Affix 组件开发，透传全部 Affix 组件属性",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean | Partial<AffixProps>"
+            },
+            {
+              "name": "resizable",
+              "description": "allow to resize column width, set `tableLayout=fixed` would be better\n\n是否允许调整列宽，设置 `tableLayout=fixed` 效果更友好，此时不允许通过 CSS 设置 `table`元素宽度，也不允许设置 `tableContentWidth`。一般不建议在列宽调整场景使用 `tableLayout: auto`。如果想要配置宽度可调整的最小值和最大值，请使用 `column.resize`，示例：`columns: [{ resize: { minWidth: 120, maxWidth: 300 } }]`。<br/> 默认规则：因列宽超出存在横向滚动条时，列宽调整仅影响当前列宽和总列宽；表格列较少没有横向滚动条时，列宽调整表现为自身宽度和相邻宽度变化",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean",
+              "default": "false"
+            },
+            {
+              "name": "row-attributes",
+              "description": "`tr` attributes\n\nHTML 标签 `tr` 的属性。类型为 Function 时，参数说明：`params.row` 表示行数据；`params.rowIndex` 表示行下标；`params.type=body` 表示属性作用于 `tbody` 中的元素；`params.type=foot` 表示属性作用于 `tfoot` 中的元素。<br />示例一：{ draggable: true }，<br />示例二：[{ draggable: true }, { title: '超出省略显示' }]。<br /> 示例三：() => [{ draggable: true }]",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "TableRowAttributes<T>"
+            },
+            {
+              "name": "row-class-name",
+              "description": "table `th` classname\n\n行类名，泛型 T 指表格数据类型。`params.row` 表示行数据；`params.rowIndex` 表示行下标；`params.type=body`  表示类名作用于 `tbody` 中的元素；`params.type= tfoot` 表示类名作用于 `tfoot` 中的元素",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "ClassName | ((params: RowClassNameParams<T>) => ClassName)"
+            },
+            {
+              "name": "row-key",
+              "description": "unique key for each row data\n\n唯一标识一行数据的字段名，来源于 `data` 中的字段。如果是字段嵌套多层，可以设置形如 `item.a.id` 的方法",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "string",
+              "default": "'id'"
+            },
+            {
+              "name": "rowspan-and-colspan",
+              "description": "rowspan and colspan\n\n用于自定义合并单元格，泛型 T 指表格数据类型。示例：`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }`",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "TableRowspanAndColspanFunc<T>"
+            },
+            {
+              "name": "rowspan-and-colspan-in-footer",
+              "description": "rowspan and colspan for footer\n\n用于自定义表尾的合并单元格，泛型 T 指表格数据类型。示例：`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }`",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "TableRowspanAndColspanFunc<T>"
+            },
+            {
+              "name": "scroll",
+              "description": "lazy load and virtual scroll\n\n懒加载和虚拟滚动。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动，`scroll.threshold` 默认为 `100`",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "TScroll"
+            },
+            {
+              "name": "show-header",
+              "description": "show table header\n\n是否显示表头",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean",
+              "default": "true"
+            },
+            {
+              "name": "size",
+              "description": "table size, support `GlobalConfigProvider`, default value is `medium`\n\n表格尺寸，支持全局配置 `GlobalConfigProvider`，默认全局配置值为 `medium`",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "SizeEnum",
               "attribute-value": {
                 "type": "enum"
               },
               "values": [
                 {
-                  "name": "row"
-                },
-                {
-                  "name": "row-handler"
+                  "name": "small"
                 },
                 {
-                  "name": "col"
+                  "name": "medium"
+                },
+                {
+                  "name": "large"
+                }
+              ]
+            },
+            {
+              "name": "stripe",
+              "description": "show stripe style\n\n是否显示斑马纹",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean",
+              "default": "false"
+            },
+            {
+              "name": "table-content-width",
+              "description": "表格内容的总宽度，注意不是表格可见宽度。主要应用于 `table-layout: auto` 模式下的固定列显示。`tableContentWidth` 内容宽度的值必须大于表格可见宽度",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "string"
+            },
+            {
+              "name": "table-layout",
+              "description": "table-layout css properties, [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout). set value to be `fixed` on `resizable=true` please\n\n表格布局方式，`<table>` 元素原生属性。[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout)。注意，在列宽调整下场景只能使用 `fixed` 模式",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "'auto' | 'fixed'",
+              "default": "fixed",
+              "attribute-value": {
+                "type": "enum"
+              },
+              "values": [
+                {
+                  "name": "auto"
+                },
+                {
+                  "name": "fixed"
+                }
+              ]
+            },
+            {
+              "name": "top-content",
+              "description": "表格顶部内容，可以用于自定义列设置、顶部查询条件等",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "string | TNode"
+            },
+            {
+              "name": "vertical-align",
+              "description": "vertical align\n\n行内容上下方向对齐",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "'top' | 'middle' | 'bottom'",
+              "default": "middle",
+              "attribute-value": {
+                "type": "enum"
+              },
+              "values": [
+                {
+                  "name": "top"
+                },
+                {
+                  "name": "middle"
+                },
+                {
+                  "name": "bottom"
+                }
+              ]
+            }
+          ],
+          "js": {
+            "events": [
+              {
+                "name": "async-loading-click",
+                "description": "trigger on async loading text clicked\n\n异步加载区域被点击时触发",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "cell-click",
+                "description": "trigger on cell clicked\n\n单元格点击时触发",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "change",
+                "description": "分页、排序、过滤等内容变化时触发，泛型 T 指表格数据类型，`currentData` 表示变化后的数据",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "column-change",
+                "description": "确认操作之前列配置发生变化时触发。`context.columns` 表示已选中的列；`context.currentColumn` 表示本次变化操作的列，值不存在表示全选操作；`context.type` 表示当前操作属于选中列或是取消列",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "column-controller-visible-change",
+                "description": "列配置弹窗显示或隐藏变化时触发",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "data-change",
+                "description": "trigger on data changing\n\n本地数据排序导致 `data` 变化时触发，第一个参数指变化后的数据，第二个参数 `context.trigger` 表示触发本次变化的来源",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "display-columns-change",
+                "description": "确认列配置时触发",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "drag-sort",
+                "description": "trigger on drag sort\n\n拖拽排序时触发，`data` 表示排序前的数据，`newData` 表示拖拽排序结束后的新数据，`sort=row` 表示行拖拽事件触发，`sort=col` 表示列拖拽事件触发",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "expand-change",
+                "description": "trigger on expand row keys changing\n\n展开行发生变化时触发，泛型 T 指表格数据类型",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "filter-change",
+                "description": "trigger on filter value changing\n\n过滤参数发生变化时触发，泛型 T 指表格数据类型",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "row-edit",
+                "description": "trigger on row data is editing\n\n行编辑时触发",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "row-validate",
+                "description": "trigger after row data validated\n\n行编辑校验完成后触发，即组件实例方法 `validateRowData` 执行结束后触发。`result` 表示校验结果，`trigger=self` 表示编辑组件内部触发的校验，`trigger='parent'` 表示表格父组件触发的校验",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "select-change",
+                "description": "trigger on select changing\n\n选中行发生变化时触发，泛型 T 指表格数据类型。两个参数，第一个参数为选中行 keys，第二个参数为更多参数，具体如下：`type = uncheck` 表示当前行操作为「取消行选中」；`type = check` 表示当前行操作为「行选中」； `currentRowKey` 表示当前操作行的 rowKey 值； `currentRowData` 表示当前操作行的行数据",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "sort-change",
+                "description": "trigger on sort changing\n\n排序发生变化时触发。其中 sortBy 表示当前排序的字段，sortType 表示排序的方式，currentDataSource 表示 sorter 排序后的结果，col 表示列配置。sort 值类型为数组时表示多字段排序",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "validate",
+                "description": "trigger after row data validated\n\n可编辑行表格，全部数据校验完成后触发。即组件实例方法 `validateTableData` 执行结束后触发",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "active-change",
+                "description": "trigger on row active change\n\n高亮行发生变化时触发，泛型 T 指表格数据类型。参数 `activeRowList` 表示所有高亮行数据， `currentRowData` 表示当前操作行数据",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "active-row-action",
+                "description": "keyboard operation event actions. used to mock selection behavior, just like macOS or windows\n\n键盘操作事件。开启行高亮功能后，会自动开启键盘操作功能，如：通过键盘(Shift)或鼠标操作连续选中高亮行时触发，一般用于处理行选中等批量操作，模拟操作系统区域选择行为",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "cell-click",
+                "description": "trigger on cell clicked\n\n单元格点击时触发",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "column-resize-change",
+                "description": "列调整大小之后触发。`context.columnsWidth` 表示操作后各个列的宽度；",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "page-change",
+                "description": "trigger on pagination changing\n\n分页发生变化时触发。参数 newDataSource 表示分页后的数据。本地数据进行分页时，newDataSource 和源数据 data 会不一样。泛型 T 指表格数据类型",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "row-click",
+                "description": "trigger on row click\n\n行点击时触发，泛型 T 指表格数据类型",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "row-dblclick",
+                "description": "trigger on double click\n\n行双击时触发，泛型 T 指表格数据类型",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "row-mousedown",
+                "description": "trigger on row mousedown\n\n鼠标在表格行按下时触发，泛型 T 指表格数据类型",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "row-mouseenter",
+                "description": "trigger on row mouseenter\n\n鼠标在表格行进入时触发，泛型 T 指表格数据类型",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "row-mouseleave",
+                "description": "trigger on row mouseenter\n\n鼠标在表格行离开时触发，泛型 T 指表格数据类型",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "row-mouseover",
+                "description": "trigger on row mouseover\n\n鼠标悬浮到行时触发，泛型 T 指表格数据类型",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "row-mouseup",
+                "description": "trigger on row mouseup\n\n鼠标在表格行按下又弹起时触发，泛型 T 指表格数据类型",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "scroll",
+                "description": "trigger on table content scroll\n\n表格内容滚动时触发",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "scroll-x",
+                "description": "trigger on scroll horizontal\n\n表格内容横向滚动时触发。请更为使用 `onScroll` 事件",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "scroll-y",
+                "description": "trigger on scroll vertical\n\n表格内容纵向滚动时触发。当内容超出高度(height)或最大高度(max-height)时，会出现纵向滚动条。请更为使用 `onScroll` 事件",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              }
+            ]
+          },
+          "slots": [
+            {
+              "name": "asyncLoading",
+              "description": "async loading state\n\n异步加载状态。值为 `loading` 显示默认文字 “正在加载中，请稍后”，值为 `loading-more` 显示“点击加载更多”，值为其他，表示完全自定义异步加载区域内容类型和参数：'loading' | 'load-more' | TNode",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "async-loading",
+              "description": "async loading state\n\n异步加载状态。值为 `loading` 显示默认文字 “正在加载中，请稍后”，值为 `loading-more` 显示“点击加载更多”，值为其他，表示完全自定义异步加载区域内容类型和参数：'loading' | 'load-more' | TNode",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "expandIcon",
+              "description": "to show expand icon. expand icon is set in first column\n\n用于控制是否显示「展开图标列」，值为 `false` 则不会显示。可以精确到某一行是否显示，还可以自定义展开图标内容。`expandedRow` 存在时，该参数有效。支持全局配置 `GlobalConfigProvider`类型和参数：boolean | TNode<ExpandArrowRenderParams<T>>【interface ExpandArrowRenderParams<T> { row: T; index: number }】",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "expand-icon",
+              "description": "to show expand icon. expand icon is set in first column\n\n用于控制是否显示「展开图标列」，值为 `false` 则不会显示。可以精确到某一行是否显示，还可以自定义展开图标内容。`expandedRow` 存在时，该参数有效。支持全局配置 `GlobalConfigProvider`类型和参数：boolean | TNode<ExpandArrowRenderParams<T>>【interface ExpandArrowRenderParams<T> { row: T; index: number }】",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "expandedRow",
+              "description": "table expanded row, to show more detail information\n\n展开行内容，泛型 T 指表格数据类型类型和参数：TNode<TableExpandedRowParams<T>>【interface TableExpandedRowParams<T> { row: T; index: number; columns: PrimaryTableCol<T>[] | BaseTableCol<T>[] }】",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "expanded-row",
+              "description": "table expanded row, to show more detail information\n\n展开行内容，泛型 T 指表格数据类型类型和参数：TNode<TableExpandedRowParams<T>>【interface TableExpandedRowParams<T> { row: T; index: number; columns: PrimaryTableCol<T>[] | BaseTableCol<T>[] }】",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "filterIcon",
+              "description": "filter icon\n\n自定义过滤图标，支持全局配置 `GlobalConfigProvider`类型和参数：TNode<{ col: PrimaryTableCol<T>; colIndex: number }>",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "filter-icon",
+              "description": "filter icon\n\n自定义过滤图标，支持全局配置 `GlobalConfigProvider`类型和参数：TNode<{ col: PrimaryTableCol<T>; colIndex: number }>",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "filterRow",
+              "description": "filter value\n\n自定义过滤状态行及清空筛选等",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "filter-row",
+              "description": "filter value\n\n自定义过滤状态行及清空筛选等",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "sortIcon",
+              "description": "sort icon\n\n自定义排序图标，支持全局配置 `GlobalConfigProvider`",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "sort-icon",
+              "description": "sort icon\n\n自定义排序图标，支持全局配置 `GlobalConfigProvider`",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "bottomContent",
+              "description": "表格底部内容，可以用于自定义列设置等",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "bottom-content",
+              "description": "表格底部内容，可以用于自定义列设置等",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "cellEmptyContent",
+              "description": "单元格数据为空时呈现的内容类型和参数：string | TNode<BaseTableCellParams<T>>",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "cell-empty-content",
+              "description": "单元格数据为空时呈现的内容类型和参数：string | TNode<BaseTableCellParams<T>>",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "empty",
+              "description": "empty text or empty element\n\n空表格呈现样式，支持全局配置 `GlobalConfigProvider`",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "firstFullRow",
+              "description": "首行内容，横跨所有列",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "first-full-row",
+              "description": "首行内容，横跨所有列",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "footerSummary",
+              "description": "footer summary content\n\n表尾总结行",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "footer-summary",
+              "description": "footer summary content\n\n表尾总结行",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "lastFullRow",
+              "description": "尾行内容，横跨所有列",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "last-full-row",
+              "description": "尾行内容，横跨所有列",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "loading",
+              "description": "loading state table\n\n加载中状态。值为 `true` 会显示默认加载中样式，可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。值为 `false` 则会取消加载状态",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "topContent",
+              "description": "表格顶部内容，可以用于自定义列设置、顶部查询条件等",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "top-content",
+              "description": "表格顶部内容，可以用于自定义列设置、顶部查询条件等",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            }
+          ]
+        },
+        {
+          "name": "t-table",
+          "source": {
+            "symbol": "PrimaryTable"
+          },
+          "description": "PrimaryTable\n\n主表格",
+          "doc-url": "https://tdesign.tencent.com/vue-next/components/table",
+          "props": [
+            {
+              "name": "async-loading",
+              "description": "async loading state\n\n异步加载状态。值为 `loading` 显示默认文字 “正在加载中，请稍后”，值为 `loading-more` 显示“点击加载更多”，值为其他，表示完全自定义异步加载区域内容",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "'loading' | 'load-more' | TNode"
+            },
+            {
+              "name": "column-controller",
+              "description": "自定义显示列控制器，值为空不会显示。具体属性请看下方 `TableColumnController` 文档",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "TableColumnController"
+            },
+            {
+              "name": "column-controller-visible",
+              "description": "是否显示列配置弹框控制器，只要该属性值不为 `undefined`，弹框的显示/隐藏完全由该属性控制",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean",
+              "default": "undefined"
+            },
+            {
+              "name": "columns",
+              "description": "table column configs\n\n列配置，泛型 T 指表格数据类型",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "Array<PrimaryTableCol<T>>",
+              "default": "[]"
+            },
+            {
+              "name": "display-columns",
+              "description": "列配置功能中，当前显示的列",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "CheckboxGroupValue"
+            },
+            {
+              "name": "drag-sort",
+              "description": "dag sort\n\n拖拽排序方式，值为 `row` 表示行拖拽排序，这种方式无法进行文本复制，慎用。值为`row-handler` 表示通过拖拽手柄进行行拖拽排序。值为 `col` 表示列顺序拖拽。值为 `row-handler-col` 表示同时支持行拖拽和列拖拽。⚠️`drag-col` 已废弃，请勿使用",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "'row' | 'row-handler' | 'col' | 'row-handler-col' | 'drag-col'",
+              "attribute-value": {
+                "type": "enum"
+              },
+              "values": [
+                {
+                  "name": "row"
+                },
+                {
+                  "name": "row-handler"
+                },
+                {
+                  "name": "col"
                 },
                 {
                   "name": "row-handler-col"
                 },
                 {
-                  "name": "drag-col"
+                  "name": "drag-col"
+                }
+              ]
+            },
+            {
+              "name": "drag-sort-options",
+              "description": "drag sort params\n\n拖拽排序扩展参数，具体参数见 [Sortable](https://github.com/SortableJS/Sortable)",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "SortableOptions"
+            },
+            {
+              "name": "editable-cell-state",
+              "description": "单元格是否允许编辑。返回值为 `true` 则表示可编辑；返回值为 `false` 则表示不可编辑，只读状态",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "EditableCellType<T>"
+            },
+            {
+              "name": "editable-row-keys",
+              "description": "editable row keys, row key value is from data[rowKey]\n\n处于编辑状态的行",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "Array<string | number>"
+            },
+            {
+              "name": "expand-icon",
+              "description": "to show expand icon. expand icon is set in first column\n\n用于控制是否显示「展开图标列」，值为 `false` 则不会显示。可以精确到某一行是否显示，还可以自定义展开图标内容。`expandedRow` 存在时，该参数有效。支持全局配置 `GlobalConfigProvider`",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean | TNode<ExpandArrowRenderParams<T>>",
+              "default": "true"
+            },
+            {
+              "name": "expand-on-row-click",
+              "description": "expand row on click\n\n是否允许点击行展开",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean"
+            },
+            {
+              "name": "expanded-row",
+              "description": "table expanded row, to show more detail information\n\n展开行内容，泛型 T 指表格数据类型",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "TNode<TableExpandedRowParams<T>>"
+            },
+            {
+              "name": "expanded-row-keys",
+              "description": "expanded row keys, row key value is from data[rowKey]\n\n展开行",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "Array<string | number>",
+              "default": "[]"
+            },
+            {
+              "name": "filter-icon",
+              "description": "filter icon\n\n自定义过滤图标，支持全局配置 `GlobalConfigProvider`",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "TNode<{ col: PrimaryTableCol<T>; colIndex: number }>"
+            },
+            {
+              "name": "filter-row",
+              "description": "filter value\n\n自定义过滤状态行及清空筛选等",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "string | TNode"
+            },
+            {
+              "name": "filter-value",
+              "description": "filter value\n\n过滤数据的值",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "FilterValue"
+            },
+            {
+              "name": "hide-sort-tips",
+              "description": "hide sort tips\n\n隐藏排序文本提示，支持全局配置 `GlobalConfigProvider`，默认全局配置值为 `false`",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean"
+            },
+            {
+              "name": "indeterminate-selected-row-keys",
+              "description": "indeterminate selected row keys, row key is from data[rowKey]\n\n半选状态行。选中行请更为使用 `selectedRowKeys` 控制",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "Array<string | number>"
+            },
+            {
+              "name": "multiple-sort",
+              "description": "support multiple column fields sort\n\n是否支持多列排序",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean",
+              "default": "false"
+            },
+            {
+              "name": "reserve-selected-row-on-paginate",
+              "description": "行选中功能，是否在分页时保留上一页选中结果不清空，本地数据分页场景下，会全选所有页数据。值为 `false` 则表示全部选中操作停留在当前页，不跨分页；本地数据分页场景下，全选仅选中当前页",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean",
+              "default": "true"
+            },
+            {
+              "name": "row-selection-allow-uncheck",
+              "description": "allow to uncheck selection in table with single row selection\n\n行选中单选场景，是否允许取消选中",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean"
+            },
+            {
+              "name": "row-selection-type",
+              "description": "single row selection, or multiple row selection\n\n行选中类型，单选或多选。效果和 `columns` 中配置的 `{ colKey: 'row-select', type: 'single' }` 一样",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "'single' | 'multiple'",
+              "attribute-value": {
+                "type": "enum"
+              },
+              "values": [
+                {
+                  "name": "single"
+                },
+                {
+                  "name": "multiple"
                 }
               ]
             },
             {
-              "name": "drag-sort-options",
-              "description": "drag sort params\n\n拖拽排序扩展参数，具体参数见 [Sortable](https://github.com/SortableJS/Sortable)",
+              "name": "select-on-row-click",
+              "description": "select row data on row click\n\n是否在点击整行时选中",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean"
+            },
+            {
+              "name": "selected-row-keys",
+              "description": "selected row keys, row key is from data[rowKey]\n\n选中行。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "Array<string | number>",
+              "default": "[]"
+            },
+            {
+              "name": "show-sort-column-bg-color",
+              "description": "column shows sort bg color\n\n当前排序列是否显示背景色",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean",
+              "default": "false"
+            },
+            {
+              "name": "sort",
+              "description": "sort configs\n\n排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "TableSort"
+            },
+            {
+              "name": "sort-icon",
+              "description": "sort icon\n\n自定义排序图标，支持全局配置 `GlobalConfigProvider`",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "TNode"
+            },
+            {
+              "name": "sort-on-row-draggable",
+              "description": "sort on row draggable\n\n允许表格行拖拽时排序。请更为使用 `dragSort=\\\"row\\\"`",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean",
+              "default": "false"
+            },
+            {
+              "name": "active-row-keys",
+              "description": "keys of highlight rows, used to mock area selection behavior, just like macOS or windows area selection\n\n高亮行，支持鼠标键盘操作(Shift)连续高亮行，可用于处理行选中等批量操作，模拟操作系统区域选择行为",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "Array<string | number>",
+              "default": "[]"
+            },
+            {
+              "name": "active-row-type",
+              "description": "make nodes can be highlight on clicked\n\n默认不会高亮点击行，`activeRowType=single` 表示鼠标点击仅允许同时高亮一行，Shift 键盘操作加鼠标操作依然可以高亮多行，因为这属于明显的区域选择行为。`activeRowType= multiple ` 表示允许鼠标点击同时高亮多行",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "'single' | 'multiple'"
+            },
+            {
+              "name": "allow-resize-column-width",
+              "description": "allow to resize column width\n\n是否允许调整列宽。请更为使用 `resizable`",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean",
+              "default": "undefined"
+            },
+            {
+              "name": "attach",
+              "description": "elements with popup would be attached to `attach`\n\n超出省略等所有浮层元素统一绑定到 `attach`，可根据实际情况调整挂载元素",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "AttachNode"
+            },
+            {
+              "name": "bordered",
+              "description": "show table bordered\n\n是否显示表格边框",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean",
+              "default": "false"
+            },
+            {
+              "name": "bottom-content",
+              "description": "表格底部内容，可以用于自定义列设置等",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "string | TNode"
+            },
+            {
+              "name": "cell-empty-content",
+              "description": "单元格数据为空时呈现的内容",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "string | TNode<BaseTableCellParams<T>>"
+            },
+            {
+              "name": "data",
+              "description": "table data\n\n数据源，泛型 T 指表格数据类型",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "Array<T>",
+              "default": "[]"
+            },
+            {
+              "name": "disable-data-page",
+              "description": "是否禁用本地数据分页。当 `data` 数据长度超过分页大小时，会自动进行本地数据分页。如果 `disableDataPage` 设置为 true，则无论何时，都不会进行本地数据分页",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean",
+              "default": "false"
+            },
+            {
+              "name": "disable-space-inactive-row",
+              "description": "can not set row to be inactive with Space keydown\n\n默认重复按下 Space 键可取消当前行高亮，是否禁用取消",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean",
+              "default": "undefined"
+            },
+            {
+              "name": "empty",
+              "description": "empty text or empty element\n\n空表格呈现样式，支持全局配置 `GlobalConfigProvider`",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "string | TNode",
+              "default": "''"
+            },
+            {
+              "name": "first-full-row",
+              "description": "首行内容，横跨所有列",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "string | TNode"
+            },
+            {
+              "name": "fixed-rows",
+              "description": "固定行（冻结行），示例：[M, N]，表示冻结表头 M 行和表尾 N 行。M 和 N 值为 0 时，表示不冻结行",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "Array<number>"
+            },
+            {
+              "name": "foot-data",
+              "description": "table foot data\n\n表尾数据源，泛型 T 指表格数据类型",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "Array<T>",
+              "default": "[]"
+            },
+            {
+              "name": "footer-affix-props",
+              "description": "affix props\n\n请更为使用 `footerAffixedBottom`。表尾吸底基于 Affix 组件开发，透传全部 Affix 组件属性",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "Partial<AffixProps>"
+            },
+            {
+              "name": "footer-affixed-bottom",
+              "description": "affix foot to viewport bottom\n\n表尾吸底。使用该功能，需要非常注意表格是相对于哪一个父元素进行滚动。值为 `true`，则表示相对于整个窗口吸底。如果表格滚动的父元素不是整个窗口，请通过 `footerAffixedBottom.container` 调整固钉的吸顶范围。基于 Affix 组件开发，透传全部 Affix 组件属性",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean | Partial<AffixProps>",
+              "default": "false"
+            },
+            {
+              "name": "footer-summary",
+              "description": "footer summary content\n\n表尾总结行",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "string | TNode"
+            },
+            {
+              "name": "header-affix-props",
+              "description": "affix props\n\n请更为使用 `headerAffixedTop`。表头吸顶基于 Affix 组件开发，透传全部 Affix 组件属性",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "Partial<AffixProps>"
+            },
+            {
+              "name": "header-affixed-top",
+              "description": "affix header to viewport top\n\n表头吸顶。使用该功能，需要非常注意表格是相对于哪一个父元素进行滚动。值为 `true`，表示相对于整个窗口吸顶。如果表格滚动的父元素不是整个窗口，请通过 `headerAffixedTop.container` 调整吸顶的位置。基于 Affix 组件开发，透传全部 Affix 组件属性",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean | Partial<AffixProps>",
+              "default": "false"
+            },
+            {
+              "name": "height",
+              "description": "table height\n\n表格高度，超出后会出现滚动条。示例：100,  '30%',  '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight`",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "string | number"
+            },
+            {
+              "name": "horizontal-scroll-affixed-bottom",
+              "description": "affix props\n\n滚动条吸底。基于 Affix 组件开发，透传全部 Affix 组件属性",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean | Partial<AffixProps>"
+            },
+            {
+              "name": "hover",
+              "description": "show hover style\n\n是否显示鼠标悬浮状态",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean",
+              "default": "false"
+            },
+            {
+              "name": "keyboard-row-hover",
+              "description": "make table row to be hover by keydown ArrowUp/ArrowDown\n\n键盘操作行显示悬浮效果，一般用于键盘操作行选中、行展开、行高亮等功能",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "boolean",
+              "default": "true"
+            },
+            {
+              "name": "last-full-row",
+              "description": "尾行内容，横跨所有列",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
+              "type": "string | TNode"
+            },
+            {
+              "name": "lazy-load",
+              "description": "load table content when it entering the visible area, all elements in table are not rendered before it become visible\n\n是否启用整个表格元素的懒加载，当页面滚动到可视区域后再渲染表格。注意和表格内部行滚动懒加载的区别，内部行滚动无论表格是否在可视区域都会默认渲染第一屏的行元素",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
-              "type": "SortableOptions"
+              "type": "boolean",
+              "default": "false"
             },
             {
-              "name": "editable-cell-state",
-              "description": "单元格是否允许编辑。返回值为 `true` 则表示可编辑；返回值为 `false` 则表示不可编辑，只读状态",
+              "name": "loading",
+              "description": "loading state table\n\n加载中状态。值为 `true` 会显示默认加载中样式，可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。值为 `false` 则会取消加载状态",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
-              "type": "EditableCellType<T>"
+              "type": "boolean | TNode",
+              "default": "undefined"
             },
             {
-              "name": "editable-row-keys",
-              "description": "editable row keys, row key value is from data[rowKey]\n\n处于编辑状态的行",
+              "name": "loading-props",
+              "description": "透传加载组件全部属性",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
-              "type": "Array<string | number>"
+              "type": "Partial<LoadingProps>"
             },
             {
-              "name": "expand-icon",
-              "description": "to show expand icon. expand icon is set in first column\n\n用于控制是否显示「展开图标列」，值为 `false` 则不会显示。可以精确到某一行是否显示，还可以自定义展开图标内容。`expandedRow` 存在时，该参数有效。支持全局配置 `GlobalConfigProvider`",
+              "name": "locale",
+              "description": "table locale config\n\n语言配置",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
-              "type": "boolean | TNode<ExpandArrowRenderParams<T>>",
-              "default": "true"
+              "type": "TableConfig"
             },
             {
-              "name": "expand-on-row-click",
-              "description": "expand row on click\n\n是否允许点击行展开",
+              "name": "max-height",
+              "description": "table max height\n\n表格最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
-              "type": "boolean"
+              "type": "string | number"
             },
             {
-              "name": "expanded-row",
-              "description": "table expanded row, to show more detail information\n\n展开行内容，泛型 T 指表格数据类型",
+              "name": "pagination",
+              "description": "you can use all props of pagination component with paginationProps\n\n分页配置，值为空则不显示。具体 API 参考分页组件。当 `data` 数据长度超过分页大小时，会自动对本地数据 `data` 进行排序，如果不希望对于 `data` 进行排序，可以设置 `disableDataPage = true`",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
-              "type": "TNode<TableExpandedRowParams<T>>"
+              "type": "PaginationProps"
             },
             {
-              "name": "expanded-row-keys",
-              "description": "expanded row keys, row key value is from data[rowKey]\n\n展开行",
+              "name": "pagination-affixed-bottom",
+              "description": "affix props\n\n分页吸底。基于 Affix 组件开发，透传全部 Affix 组件属性",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
-              "type": "Array<string | number>",
-              "default": "[]"
+              "type": "boolean | Partial<AffixProps>"
             },
             {
-              "name": "filter-icon",
-              "description": "filter icon\n\n自定义过滤图标，支持全局配置 `GlobalConfigProvider`",
+              "name": "resizable",
+              "description": "allow to resize column width, set `tableLayout=fixed` would be better\n\n是否允许调整列宽，设置 `tableLayout=fixed` 效果更友好，此时不允许通过 CSS 设置 `table`元素宽度，也不允许设置 `tableContentWidth`。一般不建议在列宽调整场景使用 `tableLayout: auto`。如果想要配置宽度可调整的最小值和最大值，请使用 `column.resize`，示例：`columns: [{ resize: { minWidth: 120, maxWidth: 300 } }]`。<br/> 默认规则：因列宽超出存在横向滚动条时，列宽调整仅影响当前列宽和总列宽；表格列较少没有横向滚动条时，列宽调整表现为自身宽度和相邻宽度变化",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
-              "type": "TNode<{ col: PrimaryTableCol<T>; colIndex: number }>"
+              "type": "boolean",
+              "default": "false"
             },
             {
-              "name": "filter-row",
-              "description": "filter value\n\n自定义过滤状态行及清空筛选等",
+              "name": "row-attributes",
+              "description": "`tr` attributes\n\nHTML 标签 `tr` 的属性。类型为 Function 时，参数说明：`params.row` 表示行数据；`params.rowIndex` 表示行下标；`params.type=body` 表示属性作用于 `tbody` 中的元素；`params.type=foot` 表示属性作用于 `tfoot` 中的元素。<br />示例一：{ draggable: true }，<br />示例二：[{ draggable: true }, { title: '超出省略显示' }]。<br /> 示例三：() => [{ draggable: true }]",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
-              "type": "string | TNode"
+              "type": "TableRowAttributes<T>"
             },
             {
-              "name": "filter-value",
-              "description": "filter value\n\n过滤数据的值",
+              "name": "row-class-name",
+              "description": "table `th` classname\n\n行类名，泛型 T 指表格数据类型。`params.row` 表示行数据；`params.rowIndex` 表示行下标；`params.type=body`  表示类名作用于 `tbody` 中的元素；`params.type= tfoot` 表示类名作用于 `tfoot` 中的元素",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
-              "type": "FilterValue"
+              "type": "ClassName | ((params: RowClassNameParams<T>) => ClassName)"
             },
             {
-              "name": "hide-sort-tips",
-              "description": "hide sort tips\n\n隐藏排序文本提示，支持全局配置 `GlobalConfigProvider`，默认全局配置值为 `false`",
+              "name": "row-key",
+              "description": "unique key for each row data\n\n唯一标识一行数据的字段名，来源于 `data` 中的字段。如果是字段嵌套多层，可以设置形如 `item.a.id` 的方法",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
-              "type": "boolean"
+              "type": "string",
+              "default": "'id'"
             },
             {
-              "name": "indeterminate-selected-row-keys",
-              "description": "indeterminate selected row keys, row key is from data[rowKey]\n\n半选状态行。选中行请更为使用 `selectedRowKeys` 控制",
+              "name": "rowspan-and-colspan",
+              "description": "rowspan and colspan\n\n用于自定义合并单元格，泛型 T 指表格数据类型。示例：`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }`",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
-              "type": "Array<string | number>"
+              "type": "TableRowspanAndColspanFunc<T>"
             },
             {
-              "name": "multiple-sort",
-              "description": "support multiple column fields sort\n\n是否支持多列排序",
+              "name": "rowspan-and-colspan-in-footer",
+              "description": "rowspan and colspan for footer\n\n用于自定义表尾的合并单元格，泛型 T 指表格数据类型。示例：`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }`",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
-              "type": "boolean",
-              "default": "false"
+              "type": "TableRowspanAndColspanFunc<T>"
             },
             {
-              "name": "reserve-selected-row-on-paginate",
-              "description": "行选中功能，是否在分页时保留上一页选中结果不清空，本地数据分页场景下，会全选所有页数据。值为 `false` 则表示全部选中操作停留在当前页，不跨分页；本地数据分页场景下，全选仅选中当前页",
+              "name": "scroll",
+              "description": "lazy load and virtual scroll\n\n懒加载和虚拟滚动。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动，`scroll.threshold` 默认为 `100`",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
-              "type": "boolean",
-              "default": "true"
+              "type": "TScroll"
             },
             {
-              "name": "row-selection-allow-uncheck",
-              "description": "allow to uncheck selection in table with single row selection\n\n行选中单选场景，是否允许取消选中",
+              "name": "show-header",
+              "description": "show table header\n\n是否显示表头",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
-              "type": "boolean"
+              "type": "boolean",
+              "default": "true"
             },
             {
-              "name": "row-selection-type",
-              "description": "single row selection, or multiple row selection\n\n行选中类型，单选或多选。效果和 `columns` 中配置的 `{ colKey: 'row-select', type: 'single' }` 一样",
+              "name": "size",
+              "description": "table size, support `GlobalConfigProvider`, default value is `medium`\n\n表格尺寸，支持全局配置 `GlobalConfigProvider`，默认全局配置值为 `medium`",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
-              "type": "'single' | 'multiple'",
+              "type": "SizeEnum",
               "attribute-value": {
                 "type": "enum"
               },
               "values": [
                 {
-                  "name": "single"
+                  "name": "small"
                 },
                 {
-                  "name": "multiple"
+                  "name": "medium"
+                },
+                {
+                  "name": "large"
                 }
               ]
             },
             {
-              "name": "select-on-row-click",
-              "description": "select row data on row click\n\n是否在点击整行时选中",
-              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
-              "type": "boolean"
-            },
-            {
-              "name": "selected-row-keys",
-              "description": "selected row keys, row key is from data[rowKey]\n\n选中行。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制",
+              "name": "stripe",
+              "description": "show stripe style\n\n是否显示斑马纹",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
-              "type": "Array<string | number>",
-              "default": "[]"
+              "type": "boolean",
+              "default": "false"
             },
             {
-              "name": "show-sort-column-bg-color",
-              "description": "column shows sort bg color\n\n当前排序列是否显示背景色",
+              "name": "table-content-width",
+              "description": "表格内容的总宽度，注意不是表格可见宽度。主要应用于 `table-layout: auto` 模式下的固定列显示。`tableContentWidth` 内容宽度的值必须大于表格可见宽度",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
-              "type": "boolean",
-              "default": "false"
+              "type": "string"
             },
             {
-              "name": "sort",
-              "description": "sort configs\n\n排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序",
+              "name": "table-layout",
+              "description": "table-layout css properties, [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout). set value to be `fixed` on `resizable=true` please\n\n表格布局方式，`<table>` 元素原生属性。[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout)。注意，在列宽调整下场景只能使用 `fixed` 模式",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
-              "type": "TableSort"
+              "type": "'auto' | 'fixed'",
+              "default": "fixed",
+              "attribute-value": {
+                "type": "enum"
+              },
+              "values": [
+                {
+                  "name": "auto"
+                },
+                {
+                  "name": "fixed"
+                }
+              ]
             },
             {
-              "name": "sort-icon",
-              "description": "sort icon\n\n自定义排序图标，支持全局配置 `GlobalConfigProvider`",
+              "name": "top-content",
+              "description": "表格顶部内容，可以用于自定义列设置、顶部查询条件等",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
-              "type": "TNode"
+              "type": "string | TNode"
             },
             {
-              "name": "sort-on-row-draggable",
-              "description": "sort on row draggable\n\n允许表格行拖拽时排序。请更为使用 `dragSort=\\\"row\\\"`",
+              "name": "vertical-align",
+              "description": "vertical align\n\n行内容上下方向对齐",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props",
-              "type": "boolean",
-              "default": "false"
+              "type": "'top' | 'middle' | 'bottom'",
+              "default": "middle",
+              "attribute-value": {
+                "type": "enum"
+              },
+              "values": [
+                {
+                  "name": "top"
+                },
+                {
+                  "name": "middle"
+                },
+                {
+                  "name": "bottom"
+                }
+              ]
             }
           ],
           "js": {
@@ -10893,53 +12077,128 @@
                 "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
               },
               {
-                "name": "data-change",
-                "description": "trigger on data changing\n\n本地数据排序导致 `data` 变化时触发，第一个参数指变化后的数据，第二个参数 `context.trigger` 表示触发本次变化的来源",
+                "name": "data-change",
+                "description": "trigger on data changing\n\n本地数据排序导致 `data` 变化时触发，第一个参数指变化后的数据，第二个参数 `context.trigger` 表示触发本次变化的来源",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "display-columns-change",
+                "description": "确认列配置时触发",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "drag-sort",
+                "description": "trigger on drag sort\n\n拖拽排序时触发，`data` 表示排序前的数据，`newData` 表示拖拽排序结束后的新数据，`sort=row` 表示行拖拽事件触发，`sort=col` 表示列拖拽事件触发",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "expand-change",
+                "description": "trigger on expand row keys changing\n\n展开行发生变化时触发，泛型 T 指表格数据类型",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "filter-change",
+                "description": "trigger on filter value changing\n\n过滤参数发生变化时触发，泛型 T 指表格数据类型",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "row-edit",
+                "description": "trigger on row data is editing\n\n行编辑时触发",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "row-validate",
+                "description": "trigger after row data validated\n\n行编辑校验完成后触发，即组件实例方法 `validateRowData` 执行结束后触发。`result` 表示校验结果，`trigger=self` 表示编辑组件内部触发的校验，`trigger='parent'` 表示表格父组件触发的校验",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "select-change",
+                "description": "trigger on select changing\n\n选中行发生变化时触发，泛型 T 指表格数据类型。两个参数，第一个参数为选中行 keys，第二个参数为更多参数，具体如下：`type = uncheck` 表示当前行操作为「取消行选中」；`type = check` 表示当前行操作为「行选中」； `currentRowKey` 表示当前操作行的 rowKey 值； `currentRowData` 表示当前操作行的行数据",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "sort-change",
+                "description": "trigger on sort changing\n\n排序发生变化时触发。其中 sortBy 表示当前排序的字段，sortType 表示排序的方式，currentDataSource 表示 sorter 排序后的结果，col 表示列配置。sort 值类型为数组时表示多字段排序",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "validate",
+                "description": "trigger after row data validated\n\n可编辑行表格，全部数据校验完成后触发。即组件实例方法 `validateTableData` 执行结束后触发",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "active-change",
+                "description": "trigger on row active change\n\n高亮行发生变化时触发，泛型 T 指表格数据类型。参数 `activeRowList` 表示所有高亮行数据， `currentRowData` 表示当前操作行数据",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "active-row-action",
+                "description": "keyboard operation event actions. used to mock selection behavior, just like macOS or windows\n\n键盘操作事件。开启行高亮功能后，会自动开启键盘操作功能，如：通过键盘(Shift)或鼠标操作连续选中高亮行时触发，一般用于处理行选中等批量操作，模拟操作系统区域选择行为",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "cell-click",
+                "description": "trigger on cell clicked\n\n单元格点击时触发",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "column-resize-change",
+                "description": "列调整大小之后触发。`context.columnsWidth` 表示操作后各个列的宽度；",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "page-change",
+                "description": "trigger on pagination changing\n\n分页发生变化时触发。参数 newDataSource 表示分页后的数据。本地数据进行分页时，newDataSource 和源数据 data 会不一样。泛型 T 指表格数据类型",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
+              },
+              {
+                "name": "row-click",
+                "description": "trigger on row click\n\n行点击时触发，泛型 T 指表格数据类型",
                 "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
               },
               {
-                "name": "display-columns-change",
-                "description": "确认列配置时触发",
+                "name": "row-dblclick",
+                "description": "trigger on double click\n\n行双击时触发，泛型 T 指表格数据类型",
                 "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
               },
               {
-                "name": "drag-sort",
-                "description": "trigger on drag sort\n\n拖拽排序时触发，`data` 表示排序前的数据，`newData` 表示拖拽排序结束后的新数据，`sort=row` 表示行拖拽事件触发，`sort=col` 表示列拖拽事件触发",
+                "name": "row-mousedown",
+                "description": "trigger on row mousedown\n\n鼠标在表格行按下时触发，泛型 T 指表格数据类型",
                 "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
               },
               {
-                "name": "expand-change",
-                "description": "trigger on expand row keys changing\n\n展开行发生变化时触发，泛型 T 指表格数据类型",
+                "name": "row-mouseenter",
+                "description": "trigger on row mouseenter\n\n鼠标在表格行进入时触发，泛型 T 指表格数据类型",
                 "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
               },
               {
-                "name": "filter-change",
-                "description": "trigger on filter value changing\n\n过滤参数发生变化时触发，泛型 T 指表格数据类型",
+                "name": "row-mouseleave",
+                "description": "trigger on row mouseenter\n\n鼠标在表格行离开时触发，泛型 T 指表格数据类型",
                 "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
               },
               {
-                "name": "row-edit",
-                "description": "trigger on row data is editing\n\n行编辑时触发",
+                "name": "row-mouseover",
+                "description": "trigger on row mouseover\n\n鼠标悬浮到行时触发，泛型 T 指表格数据类型",
                 "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
               },
               {
-                "name": "row-validate",
-                "description": "trigger after row data validated\n\n行编辑校验完成后触发，即组件实例方法 `validateRowData` 执行结束后触发。`result` 表示校验结果，`trigger=self` 表示编辑组件内部触发的校验，`trigger='parent'` 表示表格父组件触发的校验",
+                "name": "row-mouseup",
+                "description": "trigger on row mouseup\n\n鼠标在表格行按下又弹起时触发，泛型 T 指表格数据类型",
                 "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
               },
               {
-                "name": "select-change",
-                "description": "trigger on select changing\n\n选中行发生变化时触发，泛型 T 指表格数据类型。两个参数，第一个参数为选中行 keys，第二个参数为更多参数，具体如下：`type = uncheck` 表示当前行操作为「取消行选中」；`type = check` 表示当前行操作为「行选中」； `currentRowKey` 表示当前操作行的 rowKey 值； `currentRowData` 表示当前操作行的行数据",
+                "name": "scroll",
+                "description": "trigger on table content scroll\n\n表格内容滚动时触发",
                 "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
               },
               {
-                "name": "sort-change",
-                "description": "trigger on sort changing\n\n排序发生变化时触发。其中 sortBy 表示当前排序的字段，sortType 表示排序的方式，currentDataSource 表示 sorter 排序后的结果，col 表示列配置。sort 值类型为数组时表示多字段排序",
+                "name": "scroll-x",
+                "description": "trigger on scroll horizontal\n\n表格内容横向滚动时触发。请更为使用 `onScroll` 事件",
                 "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
               },
               {
-                "name": "validate",
-                "description": "trigger after row data validated\n\n可编辑行表格，全部数据校验完成后触发。即组件实例方法 `validateTableData` 执行结束后触发",
+                "name": "scroll-y",
+                "description": "trigger on scroll vertical\n\n表格内容纵向滚动时触发。当内容超出高度(height)或最大高度(max-height)时，会出现纵向滚动条。请更为使用 `onScroll` 事件",
                 "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-events"
               }
             ]
@@ -11004,6 +12263,76 @@
               "name": "sort-icon",
               "description": "sort icon\n\n自定义排序图标，支持全局配置 `GlobalConfigProvider`",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "bottomContent",
+              "description": "表格底部内容，可以用于自定义列设置等",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "bottom-content",
+              "description": "表格底部内容，可以用于自定义列设置等",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "cellEmptyContent",
+              "description": "单元格数据为空时呈现的内容类型和参数：string | TNode<BaseTableCellParams<T>>",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "cell-empty-content",
+              "description": "单元格数据为空时呈现的内容类型和参数：string | TNode<BaseTableCellParams<T>>",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "empty",
+              "description": "empty text or empty element\n\n空表格呈现样式，支持全局配置 `GlobalConfigProvider`",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "firstFullRow",
+              "description": "首行内容，横跨所有列",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "first-full-row",
+              "description": "首行内容，横跨所有列",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "footerSummary",
+              "description": "footer summary content\n\n表尾总结行",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "footer-summary",
+              "description": "footer summary content\n\n表尾总结行",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "lastFullRow",
+              "description": "尾行内容，横跨所有列",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "last-full-row",
+              "description": "尾行内容，横跨所有列",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "loading",
+              "description": "loading state table\n\n加载中状态。值为 `true` 会显示默认加载中样式，可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。值为 `false` 则会取消加载状态",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "topContent",
+              "description": "表格顶部内容，可以用于自定义列设置、顶部查询条件等",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
+            },
+            {
+              "name": "top-content",
+              "description": "表格顶部内容，可以用于自定义列设置、顶部查询条件等",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/table?tab=api#primarytable-props"
             }
           ]
         },
@@ -16231,9 +17560,161 @@
                   "name": "light"
                 }
               ]
+            },
+            {
+              "name": "attach",
+              "description": "指定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props",
+              "type": "AttachNode",
+              "default": "'body'"
+            },
+            {
+              "name": "content",
+              "description": "浮层里面的内容",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props",
+              "type": "string | TNode"
+            },
+            {
+              "name": "default",
+              "description": "触发元素，同 triggerElement",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props",
+              "type": "string | TNode"
+            },
+            {
+              "name": "disabled",
+              "description": "是否禁用组件",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props",
+              "type": "boolean"
+            },
+            {
+              "name": "hide-empty-popup",
+              "description": "浮层是否隐藏空内容，默认不隐藏",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props",
+              "type": "boolean",
+              "default": "false"
+            },
+            {
+              "name": "overlay-class-name",
+              "description": "浮层类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props",
+              "type": "ClassName"
+            },
+            {
+              "name": "overlay-inner-class-name",
+              "description": "浮层内容部分类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props",
+              "type": "ClassName"
+            },
+            {
+              "name": "overlay-inner-style",
+              "description": "浮层内容部分样式，第一个参数 `triggerElement` 表示触发元素 DOM 节点，第二个参数 `popupElement` 表示浮层元素 DOM 节点",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props",
+              "type": "Styles | ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)"
+            },
+            {
+              "name": "overlay-style",
+              "description": "浮层样式，第一个参数 `triggerElement` 表示触发元素 DOM 节点，第二个参数 `popupElement` 表示浮层元素 DOM 节点",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props",
+              "type": "Styles | ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)"
+            },
+            {
+              "name": "popper-options",
+              "description": "popper initial options，details refer to https://popper.js.org/docs\n\npopper 初始化配置，详情参考 https://popper.js.org/docs/",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props",
+              "type": "object"
+            },
+            {
+              "name": "trigger",
+              "description": "触发浮层出现的方式",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props",
+              "type": "'hover' | 'click' | 'focus' | 'mousedown' | 'context-menu'",
+              "default": "hover",
+              "attribute-value": {
+                "type": "enum"
+              },
+              "values": [
+                {
+                  "name": "hover"
+                },
+                {
+                  "name": "click"
+                },
+                {
+                  "name": "focus"
+                },
+                {
+                  "name": "mousedown"
+                },
+                {
+                  "name": "context-menu"
+                }
+              ]
+            },
+            {
+              "name": "trigger-element",
+              "description": "触发元素。值类型为字符串表示元素选择器",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props",
+              "type": "string | TNode"
+            },
+            {
+              "name": "visible",
+              "description": "是否显示浮层",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props",
+              "type": "boolean"
+            },
+            {
+              "name": "z-index",
+              "description": "组件层级，Web 侧样式默认为 5500，移动端和小程序样式默认为 1500",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props",
+              "type": "number"
             }
           ],
-          "slots": []
+          "js": {
+            "events": [
+              {
+                "name": "overlay-click",
+                "description": "trigger on popup content click\n\n内容面板点击时触发",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-events"
+              },
+              {
+                "name": "scroll",
+                "description": "下拉选项滚动事件",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-events"
+              },
+              {
+                "name": "scroll-to-bottom",
+                "description": "下拉滚动触底事件，常用于滚动到底执行具体业务逻辑",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-events"
+              },
+              {
+                "name": "visible-change",
+                "description": "当浮层隐藏或显示时触发，`trigger=document` 表示点击非浮层元素触发；`trigger=context-menu` 表示右击触发",
+                "doc-url": "https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-events"
+              }
+            ]
+          },
+          "slots": [
+            {
+              "name": "content",
+              "description": "浮层里面的内容",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props"
+            },
+            {
+              "name": "default",
+              "description": "触发元素，同 triggerElement",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props"
+            },
+            {
+              "name": "triggerElement",
+              "description": "触发元素。值类型为字符串表示元素选择器",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props"
+            },
+            {
+              "name": "trigger-element",
+              "description": "触发元素。值类型为字符串表示元素选择器",
+              "doc-url": "https://tdesign.tencent.com/vue-next/components/tooltip?tab=api#tooltip-props"
+            }
+          ]
         },
         {
           "name": "t-tooltip-lite",
diff --git a/packages/tdesign-vue-next/site/src/router/site.config.ts b/packages/tdesign-vue-next/site/src/router/site.config.ts
index e8160e0e6..24baf29c4 100644
--- a/packages/tdesign-vue-next/site/src/router/site.config.ts
+++ b/packages/tdesign-vue-next/site/src/router/site.config.ts
@@ -538,6 +538,14 @@ export const docs = [
         component: () => import('@tdesign/components/progress/progress.md'),
         componentEn: () => import('@tdesign/components/progress/progress.en-US.md'),
       },
+      {
+        title: 'QRCode 二维码',
+        titleEn: 'QRCode',
+        name: 'qrcode',
+        path: '/vue-next/components/qrcode',
+        component: () => import('@tdesign/components/qrcode/qrcode.md'),
+        componentEn: () => import('@tdesign/components/qrcode/qrcode.en-US.md'),
+      },
       {
         title: 'Skeleton 骨架屏',
         titleEn: 'Skeleton',


Test patch:
diff --git a/packages/components/pagination/__tests__/pagination.test.tsx b/packages/components/pagination/__tests__/pagination.test.tsx
index ccbe7592c..9282cb30e 100644
--- a/packages/components/pagination/__tests__/pagination.test.tsx
+++ b/packages/components/pagination/__tests__/pagination.test.tsx
@@ -2,6 +2,7 @@
 import { mount } from '@vue/test-utils';
 import { vi } from 'vitest';
 import { Select, Pagination } from '@tdesign/components';
+import TPaginationMini from '../pagination-mini';
 
 const defaultPaginationProps = {
   total: 100,
@@ -371,3 +372,44 @@ describe('Pagination', () => {
     });
   });
 });
+
+describe('TPaginationMini with Tooltip', () => {
+  it('should render Tooltip with correct content when tips enabled', () => {
+    const wrapper = mount(TPaginationMini, {
+      props: {
+        tips: { prev: '上一页', current: '当前页', next: '下一页' },
+        showCurrent: true,
+      },
+    });
+
+    const tooltips = wrapper.findAllComponents({ name: 'TTooltip' });
+    expect(tooltips).toHaveLength(3);
+    expect(tooltips[0].props('content')).toBe('上一页');
+    expect(tooltips[1].props('content')).toBe('当前页');
+    expect(tooltips[2].props('content')).toBe('下一页');
+  });
+
+  it('should not render Tooltip when tips is false', () => {
+    const wrapper = mount(TPaginationMini, {
+      props: {
+        tips: false,
+        showCurrent: true,
+      },
+    });
+
+    const tooltips = wrapper.findAllComponents({ name: 'TTooltip' });
+    expect(tooltips.length).toBe(0);
+  });
+
+  it('should pass showArrow=false to Tooltip', () => {
+    const wrapper = mount(TPaginationMini, {
+      props: {
+        tips: { prev: '上一页' },
+      },
+    });
+
+    const tooltip = wrapper.findComponent({ name: 'TTooltip' });
+    expect(tooltip.exists()).toBe(true);
+    expect(tooltip.props('showArrow')).toBe(false);
+  });
+});
diff --git a/packages/components/qrcode/__tests__/qrcode.test.tsx b/packages/components/qrcode/__tests__/qrcode.test.tsx
new file mode 100644
index 000000000..c13bca9c1
--- /dev/null
+++ b/packages/components/qrcode/__tests__/qrcode.test.tsx
@@ -0,0 +1,96 @@
+import { mount } from '@vue/test-utils';
+import { QRCode, TdQRCodeProps } from '@tdesign/components';
+import type { VueWrapper } from '@vue/test-utils';
+
+describe('QRCode', () => {
+  describe('props', () => {
+    let wrapper: VueWrapper<InstanceType<typeof QRCode>> | null = null;
+    // 因单测环境下无法获取主题色，若未定义颜色，组件将由默认颜色兜底。所以单测的颜色要为默认颜色。
+    // 颜色优先级如下：
+    // bgColor：自定义颜色 > 主题色适配 > 透明[transparent]
+    // color[fgColor]：自定义颜色 > 主题色适配 > 默认颜色[#000000]
+    const defaultBgColor = 'transparent'; // 实际使用时为 rgb(255, 255, 255)
+    const defaultFgColor = '#000000'; // 实际使用时为 rgba(0, 0, 0, .9)
+    const defaultSize = 160;
+    beforeEach(() => {
+      wrapper = mount(<QRCode value="https://tdesign.tencent.com/"></QRCode>) as VueWrapper<
+        InstanceType<typeof QRCode>
+      >;
+    });
+
+    it(':bgColor[string]', async () => {
+      expect(wrapper.find('.t-qrcode').attributes('style')).eq(
+        `background-color: ${defaultBgColor}; width: 160px; height: 160px;`,
+      );
+      const bgColor = 'rgb(7, 193, 96)';
+      await wrapper.setProps({ bgColor: bgColor });
+      expect(wrapper.find('.t-qrcode').attributes('style')).eq(
+        `background-color: ${bgColor}; width: 160px; height: 160px;`,
+      );
+    });
+
+    it(':borderless[boolean]', async () => {
+      expect(wrapper.find('.t-qrcode').classes('t-borderless')).eq(false);
+      await wrapper.setProps({ borderless: true });
+      expect(wrapper.find('.t-qrcode').classes('t-borderless')).eq(true);
+    });
+
+    // color只能测试svg模式下
+    it(':color[string]', async () => {
+      await wrapper.setProps({ type: 'svg' });
+      // [0] 是背景
+      expect(wrapper.find('.t-qrcode').findAll('path')[1].attributes('fill')).eq(defaultFgColor);
+      const color = 'rgb(7, 193, 96)';
+      await wrapper.setProps({ color });
+      expect(wrapper.find('.t-qrcode').findAll('path')[1].attributes('fill')).eq(color);
+    });
+
+    it(':icon[string]-canvas', async () => {
+      const iconSrc = 'https://tdesign.gtimg.com/site/tdesign-logo.png';
+      await wrapper.setProps({ icon: iconSrc });
+      expect(wrapper.find('.t-qrcode').find('img').attributes('src')).eq(iconSrc);
+    });
+
+    it(':icon[string]-svg', async () => {
+      const iconSrc = 'https://tdesign.gtimg.com/site/tdesign-logo.png';
+      await wrapper.setProps({ icon: iconSrc, type: 'svg' });
+      expect(wrapper.find('.t-qrcode').find('image').attributes('href')).eq(iconSrc);
+    });
+
+    it(':iconSize[number|object]-svg', async () => {});
+
+    const level: TdQRCodeProps['level'][] = ['L', 'M', 'Q', 'H'];
+    level.forEach((item) => {
+      it(`:level[string]-[${item}]`, async () => {
+        await wrapper.setProps({ level: item });
+        expect(wrapper.find('.t-qrcode').attributes('level')).eq(item);
+      });
+    });
+
+    it(':size[number]', async () => {
+      expect(wrapper.find('.t-qrcode').attributes('style')).eq(
+        `background-color: ${defaultBgColor}; width: ${defaultSize}px; height: ${defaultSize}px;`,
+      );
+      const size = 380;
+      await wrapper.setProps({ size });
+      expect(wrapper.find('.t-qrcode').attributes('style')).eq(
+        `background-color: ${defaultBgColor}; width: ${size}px; height: ${size}px;`,
+      );
+    });
+
+    const status: TdQRCodeProps['status'][] = ['expired', 'loading', 'scanned'];
+    status.forEach((item) => {
+      it(`:status[string]-[${item}]`, async () => {
+        await wrapper.setProps({ status: item });
+        expect(wrapper.find('.t-qrcode').find('.t-mask').exists()).eq(true);
+        expect(wrapper.find('.t-qrcode').find(`.t-${item}`).exists()).eq(true);
+      });
+    });
+
+    it(':statusRender[Function]', async () => {
+      const statusRender = vi.fn();
+      await wrapper.setProps({ status: 'expired', statusRender });
+      expect(statusRender).toBeCalled();
+    });
+  });
+});
diff --git a/packages/tdesign-vue-next/site/configs/test-coverage.ts b/packages/tdesign-vue-next/site/configs/test-coverage.ts
index fde8bb02a..756468dab 100644
--- a/packages/tdesign-vue-next/site/configs/test-coverage.ts
+++ b/packages/tdesign-vue-next/site/configs/test-coverage.ts
@@ -6,10 +6,10 @@ export default {
     lines: '86.16%',
   },
   alert: {
-    statements: '95.58%',
-    branches: '90.47%',
+    statements: '94.81%',
+    branches: '83.33%',
     functions: '90.9%',
-    lines: '95.58%',
+    lines: '94.81%',
   },
   anchor: {
     statements: '84.9%',
@@ -120,10 +120,10 @@ export default {
     lines: '100%',
   },
   dialog: {
-    statements: '78.12%',
+    statements: '76.37%',
     branches: '87.73%',
     functions: '65%',
-    lines: '78.12%',
+    lines: '76.37%',
   },
   divider: {
     statements: '95.38%',
@@ -132,10 +132,10 @@ export default {
     lines: '95.38%',
   },
   drawer: {
-    statements: '65.91%',
+    statements: '62.42%',
     branches: '79.41%',
     functions: '75%',
-    lines: '65.91%',
+    lines: '62.42%',
   },
   dropdown: {
     statements: '51.25%',
@@ -150,10 +150,10 @@ export default {
     lines: '96.12%',
   },
   form: {
-    statements: '96.81%',
-    branches: '92.76%',
+    statements: '96.8%',
+    branches: '93.16%',
     functions: '97.29%',
-    lines: '96.81%',
+    lines: '96.8%',
   },
   grid: {
     statements: '100%',
@@ -222,10 +222,10 @@ export default {
     lines: '96.44%',
   },
   loading: {
-    statements: '61.73%',
+    statements: '59.44%',
     branches: '94.59%',
     functions: '30.76%',
-    lines: '61.73%',
+    lines: '59.44%',
   },
   menu: {
     statements: '61.26%',
@@ -234,16 +234,16 @@ export default {
     lines: '61.26%',
   },
   message: {
-    statements: '61.67%',
-    branches: '76%',
-    functions: '35%',
-    lines: '61.67%',
+    statements: '90.44%',
+    branches: '82.45%',
+    functions: '62.06%',
+    lines: '90.44%',
   },
   notification: {
-    statements: '90.41%',
-    branches: '88.46%',
+    statements: '89.7%',
+    branches: '85.18%',
     functions: '78.57%',
-    lines: '90.41%',
+    lines: '89.7%',
   },
   pagination: {
     statements: '83.11%',
@@ -258,10 +258,10 @@ export default {
     lines: '97.1%',
   },
   popup: {
-    statements: '83.85%',
-    branches: '84.52%',
-    functions: '81.25%',
-    lines: '83.85%',
+    statements: '83.69%',
+    branches: '83.9%',
+    functions: '82%',
+    lines: '83.69%',
   },
   progress: {
     statements: '92.71%',
@@ -269,6 +269,12 @@ export default {
     functions: '80%',
     lines: '92.71%',
   },
+  qrcode: {
+    statements: '98.61%',
+    branches: '76%',
+    functions: '100%',
+    lines: '98.61%',
+  },
   radio: {
     statements: '95.34%',
     branches: '89.41%',
@@ -288,10 +294,10 @@ export default {
     lines: '90.97%',
   },
   select: {
-    statements: '83.26%',
-    branches: '69.09%',
-    functions: '63.15%',
-    lines: '83.26%',
+    statements: '86%',
+    branches: '69.1%',
+    functions: '65%',
+    lines: '86%',
   },
   selectInput: {
     statements: '98.29%',
@@ -336,10 +342,10 @@ export default {
     lines: '37.87%',
   },
   swiper: {
-    statements: '82.54%',
-    branches: '69.79%',
+    statements: '83.62%',
+    branches: '71.27%',
     functions: '67.85%',
-    lines: '82.54%',
+    lines: '83.62%',
   },
   switch: {
     statements: '97.07%',
@@ -372,16 +378,16 @@ export default {
     lines: '97.48%',
   },
   textarea: {
-    statements: '89.52%',
+    statements: '89.49%',
     branches: '66.66%',
     functions: '76.47%',
-    lines: '89.52%',
+    lines: '89.49%',
   },
   timePicker: {
-    statements: '61.09%',
+    statements: '60.46%',
     branches: '57.14%',
     functions: '44.44%',
-    lines: '61.09%',
+    lines: '60.46%',
   },
   timeline: {
     statements: '98.13%',
diff --git a/packages/tdesign-vue-next/test/scripts/generate-coverage.ts b/packages/tdesign-vue-next/test/scripts/generate-coverage.ts
index 02dfedd5e..c38b58dfb 100644
--- a/packages/tdesign-vue-next/test/scripts/generate-coverage.ts
+++ b/packages/tdesign-vue-next/test/scripts/generate-coverage.ts
@@ -1,7 +1,8 @@
 import fs from 'fs';
 import { camelCase } from 'lodash-es';
 import { parseFromString } from 'dom-parser';
-import { joinTdesignVueNextRoot } from '@tdesign/internal-utils';
+import { joinTdesignVueNextRoot, getWorkspaceRoot } from '@tdesign/internal-utils';
+import { execSync } from 'child_process';
 
 fs.readFile(joinTdesignVueNextRoot('test/coverage/index.html'), 'utf8', (err, html) => {
   if (err) {
@@ -42,7 +43,9 @@ fs.readFile(joinTdesignVueNextRoot('test/coverage/index.html'), 'utf8', (err, ht
 
     const finalRes = `export default ${JSON.stringify(resultCoverage, null, 2)};\n`;
     fs.writeFileSync(joinTdesignVueNextRoot('site/configs/test-coverage.ts'), finalRes);
-
+    const prettierConfig = getWorkspaceRoot() + '/.prettierrc.js';
+    const formatFile = joinTdesignVueNextRoot('site/configs/test-coverage.ts');
+    execSync(`pnpm exec prettier --config ${prettierConfig} --write ${formatFile}`);
     // eslint-disable-next-line
     console.log('successful re-generate coverage');
   }