king-design-analyzer 2.1.9 → 2.2.1

package/docs_for_llm/table.doc.md

@@ -12,46 +12,46 @@ import { Table, TableColumn } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| data | `T[]` | `undefined` | 否 | 表格数据数组 | `<Table :data="tableData"></Table>` |
-| fixHeader | `boolean | number | string` | `false` | 否 | 表头固定，给定需要固定高度的具体数值，当超出该值时，展示滚动条 | `<Table :data="data" :fixHeader="300"></Table>` |
-| stickHeader | `boolean | number | string` | `false` | 否 | 表头吸顶，给定需要吸顶的高度，当表头在页面滚动滚动时，距离视窗顶部的距离等于该高度时，将表头固定在此高度处 | - |
-| stickScrollbar | `boolean | number | string` | `false` | 否 | 当出现横向滚动条时，设置是否当表格底部没有滚动到视窗中时，将横向滚动条固定在页面底部；取值为number类型时，用来指定距离视窗底部的距离 | - |
-| checkType | `"checkbox" | "radio" | "none"` | `"checkbox"` | 否 | 当行可选择时，定义选择的类型: 单选 "radio" , 复选 "checkbox", 不可选 "none" | - |
-| checkedKeys | `TableRowKey[]` | `[]` | 否 | 通过key数组来指定哪些行被选中，可用v-model:checkedKeys双向绑定 | - |
-| rowKey | `(value: T, index: number) => TableRowKey` | `(value, index) => index` | 否 | 设置每行的key | `<Table :data="tableData" :rowKey="(value, index) => index"></Table>` |
-| rowCheckable | `boolean` | `true` | 否 | 当行可选时，是否点击该行任意区域都可选中 | - |
-| disableRow | `(value: T, index: number, key: TableRowKey) => boolean` | `undefined` | 否 | 定义行禁用可选的逻辑，返回true，则该行被禁用选择 | - |
-| type | `"default" | "border" | "grid"` | `"default"` | 否 | 表格类型，默认左右无边框，"border"类型会添加边框, "grid"类型会展示栅格边框 | - |
-| stripe | `boolean` | `false` | 否 | 相邻行是否展示不同的背景色 | - |
-| rowClassName | `(value: T, index: number, key: TableRowKey) => string | undefined` | `undefined` | 否 | 通过一个函数定义行的className，该函数会传入该行数据，索引和key当做参数，返回的字符串将被设为该行的className | - |
-| group | `TableGroupValue` | `undefined` | 否 | 分组配置 | - |
-| sort | `TableSortValue` | `undefined` | 否 | 排序配置，可用v-model:sort双向绑定 | - |
-| loading | `boolean` | `false` | 否 | 是否展示加载状态 | - |
-| merge | `TableMerge` | `undefined` | 否 | 指定表格单元格合并逻辑 | - |
-| expandedKeys | `TableRowKey[]` | `undefined` | 否 | 通过key来指定哪些行展开，可用v-model:expandedKeys绑定 | - |
-| rowExpandable | `boolean` | `true` | 否 | 是否点击该行任意区域即展开 | - |
-| selectedKeys | `TableRowKey[]` | `undefined` | 否 | 当rowSelectable取值为非false时，指定哪些行高亮 | - |
-| rowSelectable | `boolean | "single" | "multiple"` | `false` | 否 | 是否点击行时高亮该行，取值为multiple时，可以同时高亮多行 | - |
-| childrenKey | `string` | `"children"` | 否 | 树形表格指定子元素键名 | - |
-| indent | `number` | `32` | 否 | 树形表格指定子元素缩进宽度 | - |
-| spreadKeys | `TableRowKey[]` | `undefined` | 否 | 树形表格指定展开的行，可用v-model:spreadKeys绑定 | - |
-| tooltipPosition | `"left" | "bottom" | "right" | "top" | Position` | `"top"` | 否 | 行提示的位置 | - |
-| tooltipContainer | `Container` | `undefined` | 否 | 指定行提示弹层追加的位置，支持函数或 CSS 选择器 | - |
-| keepStatus | `boolean` | `false` | 否 | 是否在行销毁的时候，保持该行在checkedKeys | selectedKeys | spreadKeys | expandedKeys中的key值 | - |
-| showIndeterminate | `boolean` | `true` | 否 | 表头的Checkbox是否支持展示半选中状态 | - |
-| resizable | `boolean` | `false` | 否 | 是否可以表头拖动调整列宽 | - |
-| minColWidth | `number` | `40` | 否 | 指定所有列拖动时的最小宽度 | - |
-| widthStoreKey | `string` | `undefined` | 否 | 如果要保存表格拖动后的列宽信息，可以通过该属性设置保存到localStorage中的key | - |
-| draggable | `boolean` | `false` | 否 | 表格行是否可拖动排序 | - |
-| animation | `boolean | [boolean, boolean]` | `true` | 否 | 是否开启动效，可以通过数组单独设置行和列的动效 | - |
-| hideHeader | `boolean` | `false` | 否 | 是否隐藏表头 | - |
-| pagination | `boolean | PaginationProps` | `false` | 否 | 是否支持分页，可传入对象配置分页参数 | - |
-| fixFooter | `boolean` | `false` | 否 | table给定需要固定高度时，自定义footer固定 | - |
-| load | `(node: any) => Promise<any[]> | void` | `undefined` | 否 | 指定异步加载节点数据的函数，该函数通过Promise返回数组来添加子节点数据 | - |
-| spreadArrowIndex | `number` | `0` | 否 | 指定树形表格展开Icon的所在列，默认在第一列 | - |
-| virtual | `boolean` | `false` | 否 | 是否开启虚拟滚动，适用于大数据量场景 | - |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| data | `T[]` | `undefined` | 否 | 表格数据数组 | - | `<Table :data="tableData"></Table>` |
+| fixHeader | `boolean | number | string` | `false` | 否 | 表头固定，给定需要固定高度的具体数值，当超出该值时，展示滚动条 | - | `<Table :data="data" :fixHeader="300"></Table>` |
+| stickHeader | `boolean | number | string` | `false` | 否 | 表头吸顶，给定需要吸顶的高度，当表头在页面滚动滚动时，距离视窗顶部的距离等于该高度时，将表头固定在此高度处 | - | - |
+| stickScrollbar | `boolean | number | string` | `false` | 否 | 当出现横向滚动条时，设置是否当表格底部没有滚动到视窗中时，将横向滚动条固定在页面底部；取值为number类型时，用来指定距离视窗底部的距离 | - | - |
+| checkType | `"checkbox" | "radio" | "none"` | `"checkbox"` | 否 | 当行可选择时，定义选择的类型: 单选 "radio" , 复选 "checkbox", 不可选 "none" | - | - |
+| checkedKeys | `TableRowKey[]` | `[]` | 否 | 通过key数组来指定哪些行被选中，可用v-model:checkedKeys双向绑定 | - | - |
+| rowKey | `(value: T, index: number) => TableRowKey` | `(value, index) => index` | 否 | 设置每行的key | - | `<Table :data="tableData" :rowKey="(value, index) => index"></Table>` |
+| rowCheckable | `boolean` | `true` | 否 | 当行可选时，是否点击该行任意区域都可选中 | - | - |
+| disableRow | `(value: T, index: number, key: TableRowKey) => boolean` | `undefined` | 否 | 定义行禁用可选的逻辑，返回true，则该行被禁用选择 | - | - |
+| type | `"default" | "border" | "grid"` | `"default"` | 否 | 表格类型，默认左右无边框，"border"类型会添加边框, "grid"类型会展示栅格边框 | - | - |
+| stripe | `boolean` | `false` | 否 | 相邻行是否展示不同的背景色 | - | - |
+| rowClassName | `(value: T, index: number, key: TableRowKey) => string | undefined` | `undefined` | 否 | 通过一个函数定义行的className，该函数会传入该行数据，索引和key当做参数，返回的字符串将被设为该行的className | - | - |
+| group | `TableGroupValue` | `undefined` | 否 | 分组配置 | - | - |
+| sort | `TableSortValue` | `undefined` | 否 | 排序配置，可用v-model:sort双向绑定 | - | - |
+| loading | `boolean` | `false` | 否 | 是否展示加载状态 | - | - |
+| merge | `TableMerge` | `undefined` | 否 | 指定表格单元格合并逻辑 | - | - |
+| expandedKeys | `TableRowKey[]` | `undefined` | 否 | 通过key来指定哪些行展开，可用v-model:expandedKeys绑定 | - | - |
+| rowExpandable | `boolean` | `true` | 否 | 是否点击该行任意区域即展开 | - | - |
+| selectedKeys | `TableRowKey[]` | `undefined` | 否 | 当rowSelectable取值为非false时，指定哪些行高亮 | - | - |
+| rowSelectable | `boolean | "single" | "multiple"` | `false` | 否 | 是否点击行时高亮该行，取值为multiple时，可以同时高亮多行 | - | - |
+| childrenKey | `string` | `"children"` | 否 | 树形表格指定子元素键名 | - | - |
+| indent | `number` | `32` | 否 | 树形表格指定子元素缩进宽度 | - | - |
+| spreadKeys | `TableRowKey[]` | `undefined` | 否 | 树形表格指定展开的行，可用v-model:spreadKeys绑定 | - | - |
+| tooltipPosition | `"left" | "bottom" | "right" | "top" | Position` | `"top"` | 否 | 行提示的位置 | - | - |
+| tooltipContainer | `Container` | `undefined` | 否 | 指定行提示弹层追加的位置，支持函数或 CSS 选择器 | - | - |
+| keepStatus | `boolean` | `false` | 否 | 是否在行销毁的时候，保持该行在checkedKeys | selectedKeys | spreadKeys | expandedKeys中的key值 | - | - |
+| showIndeterminate | `boolean` | `true` | 否 | 表头的Checkbox是否支持展示半选中状态 | - | - |
+| resizable | `boolean` | `false` | 否 | 是否可以表头拖动调整列宽 | - | - |
+| minColWidth | `number` | `40` | 否 | 指定所有列拖动时的最小宽度 | - | - |
+| widthStoreKey | `string` | `undefined` | 否 | 如果要保存表格拖动后的列宽信息，可以通过该属性设置保存到localStorage中的key | - | - |
+| draggable | `boolean` | `false` | 否 | 表格行是否可拖动排序 | - | - |
+| animation | `boolean | [boolean, boolean]` | `true` | 否 | 是否开启动效，可以通过数组单独设置行和列的动效 | - | - |
+| hideHeader | `boolean` | `false` | 否 | 是否隐藏表头 | - | - |
+| pagination | `boolean | PaginationProps` | `false` | 否 | 是否支持分页，可传入对象配置分页参数 | - | - |
+| fixFooter | `boolean` | `false` | 否 | table给定需要固定高度时，自定义footer固定 | - | - |
+| load | `(node: any) => Promise<any[]> | void` | `undefined` | 否 | 指定异步加载节点数据的函数，该函数通过Promise返回数组来添加子节点数据 | - | - |
+| spreadArrowIndex | `number` | `0` | 否 | 指定树形表格展开Icon的所在列，默认在第一列 | - | - |
+| virtual | `boolean` | `false` | 否 | 是否开启虚拟滚动，适用于大数据量场景 | - | - |
 
 ## 事件 (Events)
 | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
@@ -65,15 +65,35 @@ import { Table, TableColumn } from '@king-design/vue';
 | uncheckAll | `@uncheck-all` | 手动取消全选触发 | `-` | `<Table @uncheck-all="handleUncheckAll" />` |
 | page | `@page` | 当内置翻页改变页码或每页数量时触发 | `data: {value: number, limit: number}` | `<Table :data="data" :pagination="true" @page="handlePage"></Table>` |
 
-### 事件处理函数示例
-**clickRow**:
+### 事件参数说明
+**clickRow**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| data | `T` | 是 | - | 行数据 |
+| index | `number` | 是 | - | 行索引 |
+| key | `TableRowKey` | 是 | - | 行key |
+
+事件处理示例:
 ```typescript
 const handleClickRow = (data: any, index: number, key: string | number) => {
   console.log('点击行:', data);
 };
 ```
 
-**dragend**:
+**dragstart**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| data | `{key: TableRowKey, from: number}` | 是 | - | 拖动开始信息 |
+
+**dragend**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| data | `{key: TableRowKey, from: number, to: number}` | 是 | - | 拖动结束信息 |
+
+事件处理示例:
 ```typescript
 const handleDragEnd = (info: {key: number, from: number, to: number}) => {
   const item = data.value.splice(info.from, 1)[0];
@@ -81,21 +101,43 @@ const handleDragEnd = (info: {key: number, from: number, to: number}) => {
 };
 ```
 
-**checkRow**:
+**checkRow**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| data | `T` | 是 | - | 选中行数据 |
+| index | `number` | 是 | - | 行索引 |
+| key | `TableRowKey` | 是 | - | 行key |
+
+事件处理示例:
 ```typescript
 const handleCheckRow = (data: any, index: number, key: string | number) => {
   console.log('选中行:', data);
 };
 ```
 
-**uncheckRow**:
+**uncheckRow**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| data | `T` | 是 | - | 取消选中行数据 |
+| index | `number` | 是 | - | 行索引 |
+| key | `TableRowKey` | 是 | - | 行key |
+
+事件处理示例:
 ```typescript
 const handleUncheckRow = (data: any, index: number, key: string | number) => {
   console.log('取消选中:', data);
 };
 ```
 
-**page**:
+**page**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| data | `{value: number, limit: number}` | 是 | - | 分页信息 |
+
+事件处理示例:
 ```typescript
 const handlePage = (pageInfo: {value: number, limit: number}) => {
   console.log('当前页:', pageInfo.value, '每页:', pageInfo.limit);
@@ -126,21 +168,120 @@ const handlePage = (pageInfo: {value: number, limit: number}) => {
   </template>
 </Table>` |
 
+### 插槽参数说明
+**empty**
+
+- 参数结构: 无参数
+
+**expand**
+
+- 参数结构: #expand="[row, index]"
+- 参数列表: `row: T`、`index: number`
+
+**footer**
+
+- 参数结构: 无参数
+
+**tooltip**
+
+- 参数结构: #tooltip="[data, index]"
+- 参数列表: `data: T`、`index: number`
+
 ## 方法 (Methods)
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| getCheckedData | 获取选中数据信息 | `` | `T[]` |
-| getSelectedData | 获取高亮行数据信息 | `` | `T[]` |
-| checkAll | 全部选中 | `` | `void` |
-| uncheckAll | 全不选中 | `` | `void` |
+| getCheckedData | 获取选中数据信息 | `-` | `T[]` |
+| getSelectedData | 获取高亮行数据信息 | `-` | `T[]` |
+| checkAll | 全部选中 | `-` | `void` |
+| uncheckAll | 全不选中 | `-` | `void` |
 | scrollToRowByIndex | 通过索引指定滚动的行 | `index: number` | `Promise<void>` |
 | scrollToRowByKey | 通过key指定滚动的行 | `key: TableRowKey` | `Promise<void>` |
-| exportTable | 导出表格 | `data: T[], filename: string` | `Promise<string>` |
+| exportTable | 导出表格 | `data?: T[], filename?: string` | `Promise<string>` |
+
+### 方法参数说明
+**scrollToRowByIndex**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| index | `number` | 是 | - | 行索引 |
+
+调用示例:
+```typescript
+await tableRef.value?.scrollToRowByIndex(10);
+```
+
+**scrollToRowByKey**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| key | `TableRowKey` | 是 | - | 行key |
+
+调用示例:
+```typescript
+await tableRef.value?.scrollToRowByKey('row-id-123');
+```
+
+**exportTable**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| data | `T[]` | 否 | `this.data` | 要导出的数据 |
+| filename | `string` | 否 | `"table"` | 导出文件名 |
+
+调用示例:
+```typescript
+const content = await tableRef.value?.exportTable(data.value, 'users');
+```
+
+### 方法调用示例
+**getCheckedData**
+
+```typescript
+const tableRef = ref<InstanceType<typeof Table>>();
+const checkedData = tableRef.value?.getCheckedData();</InstanceType>
+```
+
+**getSelectedData**
+
+```typescript
+const selectedData = tableRef.value?.getSelectedData();
+```
+
+**checkAll**
+
+```typescript
+tableRef.value?.checkAll();
+```
+
+**uncheckAll**
+
+```typescript
+tableRef.value?.uncheckAll();
+```
+
+**scrollToRowByIndex**
+
+```typescript
+await tableRef.value?.scrollToRowByIndex(10);
+```
+
+**scrollToRowByKey**
+
+```typescript
+await tableRef.value?.scrollToRowByKey('row-id-123');
+```
+
+**exportTable**
+
+```typescript
+const content = await tableRef.value?.exportTable(data.value, 'users');
+```
 
 ## 子组件 (Sub-Components)
 ### TableColumn
 表格列定义
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | key | `string` | 指定当前列的key，必须指定 | `<TableColumn key="name" title="姓名" />` |
@@ -160,28 +301,149 @@ const handlePage = (pageInfo: {value: number, limit: number}) => {
 | hidden | `boolean` | 是否隐藏当前列，仅为不可见，不影响exportTable导出表格 | - |
 | ellipsis | `boolean` | 是否开启超长省略 | `<TableColumn key="desc" title="描述" ellipsis />` |
 
-**插槽**:
-- `#title`: 自定义复杂表头内容
-- `#template="[data, index]"`: 自定义单元格内容
-- `#default="[data, index]"`: 与template扩展点等价，为了方便vue中使用的别名
+#### 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| title | 自定义复杂表头内容 | `#title` | `<TableColumn key="custom">
+  <template #title>自定义表头</template>
+</TableColumn>` |
+| template | 自定义单元格内容 | `#template="[data, index]"` | `<TableColumn key="action" title="操作">
+  <template #template="[data]">
+    <Button @click="handleEdit(data)">编辑</Button>
+  </template>
+</TableColumn>` |
+| default | 与template扩展点等价，为了方便vue中使用的别名 | `#default="[data, index]"` | `<TableColumn key="action" title="操作">
+  <template #default="[data]">
+    <Button @click="handleEdit(data)">编辑</Button>
+  </template>
+</TableColumn>` |
+
+##### 插槽参数说明
+**title**
+
+- 参数结构: 无参数
+
+**template**
+
+- 参数结构: #template="[data, index]"
+- 参数列表: `data: T`、`index: number`
+
+**default**
+
+- 参数结构: #default="[data, index]"
+- 参数列表: `data: T`、`index: number`
+
+#### 组合示例
+##### 自定义单元格
+**场景**: 创建带有状态标签和操作按钮的表格
+
+使用插槽自定义单元格内容
+
+**命中的子组件 API**: 属性: key, title | 插槽: default
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Table, TableColumn, Button, Tag } from '@king-design/vue';
+
+const data = ref([
+  { name: '张三', status: 'active' },
+  { name: '李四', status: 'inactive' }
+]);
+</script>
+<template>
+  <Table :data="data">
+    <TableColumn key="name" title="姓名" />
+    <TableColumn key="status" title="状态">
+      <template #default="[row]">
+        <Tag :type="row.status === 'active' ? 'success' : 'warning'">
+          {{ row.status === 'active' ? '激活' : '未激活' }}
+        </Tag>
+      </template>
+    </TableColumn>
+    <TableColumn key="action" title="操作">
+      <template #default="[row]">
+        <Button type="primary" size="small">编辑</Button>
+      </template>
+    </TableColumn>
+  </Table>
+</template>
+```
+
+##### 基础表格
+**场景**: 创建一个简单的表格展示用户信息
+
+展示基本的表格用法
+
+**命中的子组件 API**: 属性: key, title
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Table, TableColumn } from '@king-design/vue';
+
+const data = ref([
+  { name: '张三', age: 25, address: '北京' },
+  { name: '李四', age: 30, address: '上海' }
+]);
+</script>
+<template>
+  <Table :data="data">
+    <TableColumn key="name" title="姓名" />
+    <TableColumn key="age" title="年龄" />
+    <TableColumn key="address" title="地址" />
+  </Table>
+</template>
+```
+
+##### 可选择表格
+**场景**: 创建一个可多选的表格，支持获取选中行
+
+支持行选择的表格
+
+**命中的子组件 API**: 属性: key, title
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Table, TableColumn } from '@king-design/vue';
+
+const data = ref([
+  { id: 1, name: '张三' },
+  { id: 2, name: '李四' }
+]);
+const checkedKeys = ref<number[]>([]);
+</script>
+<template>
+  <Table :data="data" checkType="checkbox" v-model:checkedKeys="checkedKeys" :rowKey="row => row.id">
+    <TableColumn key="name" title="姓名" />
+  </Table>
+  <p>选中: {{ checkedKeys }}</p>
+</template>
+```
 
 ## 常见错误与正确用法 (Anti-Hallucination)
+### TableColumn 作用域插槽参数解构方式错误
 > **错误用法**: `<template #default="{ row }">`
 > **正确写法**: `<template #default="[row]">`
 > **说明**: KPC 组件库使用数组形式传递作用域插槽参数，而非对象解构。正确写法是 [row] 或 [row, index]，不是 { row } 或 { row, index }
 
+### TableColumn 未设置 key 属性
 > **错误用法**: `<TableColumn title="姓名" />`
 > **正确写法**: `<TableColumn key="name" title="姓名" />`
 > **说明**: TableColumn 的 key 属性是必须的，用于标识列和数据映射
 
+### 使用选择功能时未设置 rowKey
 > **错误用法**: `<Table :data="data" checkType="checkbox" v-model:checkedKeys="keys">`
 > **正确写法**: `<Table :data="data" checkType="checkbox" v-model:checkedKeys="keys" :rowKey="row => row.id">`
 > **说明**: 使用 checkType 进行行选择时，应该设置 rowKey 来唯一标识每行，否则默认使用数组索引，数据变化时可能导致选中状态错乱
 
+### TableColumn 错误使用 prop 属性
 > **错误用法**: `<TableColumn prop="name" />`
 > **正确写法**: `<TableColumn key="name" />`
 > **说明**: KPC TableColumn 使用 `key` 属性来指定数据字段，而不是 `prop`。
 
+### TableColumn 错误使用 label 属性
 > **错误用法**: `<TableColumn label="姓名" />`
 > **正确写法**: `<TableColumn title="姓名" />`
 > **说明**: KPC TableColumn 使用 `title` 属性来指定列标题，而不是 `label`。

package/docs_for_llm/tablecolumnid.doc.md

@@ -2,9 +2,9 @@
 
 用于表格中的ID列展示，支持复制功能和禁用状态。
 
-**关键词**: id, column, table, 表格列
+**关键词**: id, column, table, 表格列, ID列, 名称ID列, 资源标识列
 
-**使用场景**: 资源列表ID列展示
+**使用场景**: 资源列表ID列展示、支持复制的名称和 ID 展示、表格中可点击资源名称列
 
 ## 导入语句
 ```typescript
@@ -12,20 +12,20 @@ import { TableColumnId } from '@ksyun-internal/versatile';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| name | `string` | `""` | 否 | 显示的名称 | - |
-| id | `string` | `""` | 否 | 显示的 id | - |
-| disabled | `boolean` | `false` | 否 | 是否禁止复制功能 | - |
-| disabledClickName | `boolean` | `false` | 否 | 是否置灰名称 | - |
-| disabledEditable | `boolean` | `false` | 否 | 是否置灰编辑按钮 | - |
-| type | `"link" | "none"` | `"link"` | 否 | 样式模式 | - |
-| editable | `boolean` | `false` | 否 | 名称是否支持编辑 | - |
-| editableTip | `string` | `"编辑"` | 否 | 编辑图标的 tooltip 提示，默认编辑 | - |
-| editableProps | `Record<string, any>` | `undefined` | 否 | Editable 组件支持的属性 | - |
-| to | `string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric` | `undefined` | 否 | 链接跳转路径，当 type 为 'link' 时生效，同 router-link 的 to 属性一致；当使用 to 属性进行跳转时，右键菜单栏才会出现 '在新标签页中打开' | - |
-| target | `'_blank' | '_self' | '_parent' | '_top'` | `'_self'` | 否 | 链接跳转目标，当 type 为 'link' 且使用 to 时生效，同 a 标签的 target 属性一致 | - |
-| maxLines | `number` | `1` | 否 | 名称/ID 展示的最大行数，超出部分会被省略号代替 | - |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| name | `string` | `""` | 否 | 显示的名称 | - | - |
+| id | `string` | `""` | 否 | 显示的 id | - | - |
+| disabled | `boolean` | `false` | 否 | 是否禁止复制功能 | - | - |
+| disabledClickName | `boolean` | `false` | 否 | 是否置灰名称 | - | - |
+| disabledEditable | `boolean` | `false` | 否 | 是否置灰编辑按钮 | - | - |
+| type | `"link" | "none"` | `"link"` | 否 | 样式模式 | - | - |
+| editable | `boolean` | `false` | 否 | 名称是否支持编辑 | - | - |
+| editableTip | `string` | `"编辑"` | 否 | 编辑图标的 tooltip 提示，默认编辑 | - | - |
+| editableProps | `Record<string, any>` | `undefined` | 否 | Editable 组件支持的属性 | - | - |
+| to | `string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric` | `undefined` | 否 | 链接跳转路径，当 type 为 'link' 时生效，同 router-link 的 to 属性一致；当使用 to 属性进行跳转时，右键菜单栏才会出现 '在新标签页中打开' | - | - |
+| target | `'_blank' | '_self' | '_parent' | '_top'` | `'_self'` | 否 | 链接跳转目标，当 type 为 'link' 且使用 to 时生效，同 a 标签的 target 属性一致 | - | - |
+| maxLines | `number` | `1` | 否 | 名称/ID 展示的最大行数，超出部分会被省略号代替 | - | - |
 
 ## 事件 (Events)
 | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
@@ -34,3 +34,23 @@ import { TableColumnId } from '@ksyun-internal/versatile';
 | click:id | `@click:id` | 当点击 id 时触发 | `value: string` | `<TableColumnId @click:id="handleClickId" />` |
 | change:name | `@change:name` | 当编辑名称，名称内容改变时触发 | `newValue: string, oldValue: string` | `<TableColumnId @change:name="(newVal, oldVal) => handleNameChange(newVal, oldVal)" /></TableColumnId>` |
 
+### 事件参数说明
+**click:name**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `string` | 是 | - | 名称的值 |
+
+**click:id**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `string` | 是 | - | id 的值 |
+
+**change:name**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| newValue | `string` | 是 | - | 新的名称值 |
+| oldValue | `string` | 是 | - | 旧的名称值 |
+