king-design-analyzer 1.0.0

package/components/table.json

@@ -0,0 +1,1057 @@
+{
+    "id": "table",
+    "name": "Table",
+    "displayName": "表格",
+    "category": "data",
+    "description": "用于展示结构化数据，支持选择、排序、筛选、分页、固定列、树形数据、虚拟滚动等功能",
+    "importStatement": "import { Table, TableColumn } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "data",
+            "description": "表格数据数组",
+            "type": {
+                "raw": "T[]",
+                "kind": "array"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Table :data=\"tableData\">"
+        },
+        {
+            "name": "fixHeader",
+            "description": "表头固定，给定需要固定高度的具体数值，当超出该值时，展示滚动条",
+            "type": {
+                "raw": "boolean | number | string",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Table :data=\"data\" :fixHeader=\"300\">"
+        },
+        {
+            "name": "stickHeader",
+            "description": "表头吸顶，给定需要吸顶的高度，当表头在页面滚动滚动时，距离视窗顶部的距离等于该高度时，将表头固定在此高度处",
+            "type": {
+                "raw": "boolean | number | string",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "stickScrollbar",
+            "description": "当出现横向滚动条时，设置是否当表格底部没有滚动到视窗中时，将横向滚动条固定在页面底部；取值为number类型时，用来指定距离视窗底部的距离",
+            "type": {
+                "raw": "boolean | number | string",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "checkType",
+            "description": "当行可选择时，定义选择的类型: 单选 \"radio\" , 复选 \"checkbox\", 不可选 \"none\"",
+            "type": {
+                "raw": "\"checkbox\" | \"radio\" | \"none\"",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "\"checkbox\"",
+            "allowedValues": [
+                {
+                    "value": "checkbox",
+                    "label": "复选",
+                    "isDefault": true
+                },
+                {
+                    "value": "radio",
+                    "label": "单选"
+                },
+                {
+                    "value": "none",
+                    "label": "不可选"
+                }
+            ]
+        },
+        {
+            "name": "checkedKeys",
+            "description": "通过key数组来指定哪些行被选中，可用v-model:checkedKeys双向绑定",
+            "type": {
+                "raw": "TableRowKey[]",
+                "kind": "array"
+            },
+            "required": false,
+            "default": "[]"
+        },
+        {
+            "name": "rowKey",
+            "description": "设置每行的key",
+            "type": {
+                "raw": "(value: T, index: number) => TableRowKey",
+                "kind": "function"
+            },
+            "required": false,
+            "default": "(value, index) => index"
+        },
+        {
+            "name": "rowCheckable",
+            "description": "当行可选时，是否点击该行任意区域都可选中",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true"
+        },
+        {
+            "name": "disableRow",
+            "description": "定义行禁用可选的逻辑，返回true，则该行被禁用选择",
+            "type": {
+                "raw": "(value: T, index: number, key: TableRowKey) => boolean",
+                "kind": "function"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "type",
+            "description": "表格类型，默认左右无边框，\"border\"类型会添加边框, \"grid\"类型会展示栅格边框",
+            "type": {
+                "raw": "\"default\" | \"border\" | \"grid\"",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "\"default\"",
+            "allowedValues": [
+                {
+                    "value": "default",
+                    "label": "默认",
+                    "isDefault": true
+                },
+                {
+                    "value": "border",
+                    "label": "带边框"
+                },
+                {
+                    "value": "grid",
+                    "label": "栅格边框"
+                }
+            ]
+        },
+        {
+            "name": "stripe",
+            "description": "相邻行是否展示不同的背景色",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "rowClassName",
+            "description": "通过一个函数定义行的className，该函数会传入该行数据，索引和key当做参数，返回的字符串将被设为该行的className",
+            "type": {
+                "raw": "(value: T, index: number, key: TableRowKey) => string | undefined",
+                "kind": "function"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "group",
+            "description": "分组配置",
+            "type": {
+                "raw": "TableGroupValue",
+                "kind": "object"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "sort",
+            "description": "排序配置，可用v-model:sort双向绑定",
+            "type": {
+                "raw": "TableSortValue",
+                "kind": "object"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "loading",
+            "description": "是否展示加载状态",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "merge",
+            "description": "指定表格单元格合并逻辑",
+            "type": {
+                "raw": "TableMerge",
+                "kind": "function"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "expandedKeys",
+            "description": "通过key来指定哪些行展开，可用v-model:expandedKeys绑定",
+            "type": {
+                "raw": "TableRowKey[]",
+                "kind": "array"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "rowExpandable",
+            "description": "是否点击该行任意区域即展开",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true"
+        },
+        {
+            "name": "selectedKeys",
+            "description": "当rowSelectable取值为非false时，指定哪些行高亮",
+            "type": {
+                "raw": "TableRowKey[]",
+                "kind": "array"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "rowSelectable",
+            "description": "是否点击行时高亮该行，取值为multiple时，可以同时高亮多行",
+            "type": {
+                "raw": "boolean | \"single\" | \"multiple\"",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "childrenKey",
+            "description": "树形表格指定子元素键名",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"children\""
+        },
+        {
+            "name": "indent",
+            "description": "树形表格指定子元素缩进宽度",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "32"
+        },
+        {
+            "name": "spreadKeys",
+            "description": "树形表格指定展开的行，可用v-model:spreadKeys绑定",
+            "type": {
+                "raw": "TableRowKey[]",
+                "kind": "array"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "tooltipPosition",
+            "description": "行提示的位置",
+            "type": {
+                "raw": "\"left\" | \"bottom\" | \"right\" | \"top\" | Position",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "\"top\""
+        },
+        {
+            "name": "tooltipContainer",
+            "description": "指定行提示弹层追加的位置，支持函数或 CSS 选择器",
+            "type": {
+                "raw": "Container",
+                "kind": "custom"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "keepStatus",
+            "description": "是否在行销毁的时候，保持该行在checkedKeys | selectedKeys | spreadKeys | expandedKeys中的key值",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "showIndeterminate",
+            "description": "表头的Checkbox是否支持展示半选中状态",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true"
+        },
+        {
+            "name": "resizable",
+            "description": "是否可以表头拖动调整列宽",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "minColWidth",
+            "description": "指定所有列拖动时的最小宽度",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "40"
+        },
+        {
+            "name": "widthStoreKey",
+            "description": "如果要保存表格拖动后的列宽信息，可以通过该属性设置保存到localStorage中的key",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "draggable",
+            "description": "表格行是否可拖动排序",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "animation",
+            "description": "是否开启动效，可以通过数组单独设置行和列的动效",
+            "type": {
+                "raw": "boolean | [boolean, boolean]",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "true"
+        },
+        {
+            "name": "hideHeader",
+            "description": "是否隐藏表头",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "pagination",
+            "description": "是否支持分页，可传入对象配置分页参数",
+            "type": {
+                "raw": "boolean | PaginationProps",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "fixFooter",
+            "description": "table给定需要固定高度时，自定义footer固定",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "load",
+            "description": "指定异步加载节点数据的函数，该函数通过Promise返回数组来添加子节点数据",
+            "type": {
+                "raw": "(node: any) => Promise<any[]> | void",
+                "kind": "function"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "spreadArrowIndex",
+            "description": "指定树形表格展开Icon的所在列，默认在第一列",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "0"
+        },
+        {
+            "name": "virtual",
+            "description": "是否开启虚拟滚动，适用于大数据量场景",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        }
+    ],
+    "events": [
+        {
+            "name": "clickRow",
+            "vueEventName": "@click-row",
+            "description": "点击某行时触发",
+            "payload": [
+                {
+                    "name": "data",
+                    "type": "T",
+                    "description": "行数据"
+                },
+                {
+                    "name": "index",
+                    "type": "number",
+                    "description": "行索引"
+                },
+                {
+                    "name": "key",
+                    "type": "TableRowKey",
+                    "description": "行key"
+                }
+            ],
+            "usageExample": "<Table :data=\"data\" @click-row=\"handleClickRow\">",
+            "handlerExample": "const handleClickRow = (data: any, index: number, key: string | number) => {\n  console.log('点击行:', data);\n};"
+        },
+        {
+            "name": "dragstart",
+            "vueEventName": "@dragstart",
+            "description": "行拖动开始",
+            "payload": [
+                {
+                    "name": "data",
+                    "type": "{key: TableRowKey, from: number}",
+                    "description": "拖动开始信息"
+                }
+            ],
+            "usageExample": "<Table :data=\"data\" draggable @dragstart=\"handleDragStart\">"
+        },
+        {
+            "name": "dragend",
+            "vueEventName": "@dragend",
+            "description": "行拖动结束时触发",
+            "payload": [
+                {
+                    "name": "data",
+                    "type": "{key: TableRowKey, from: number, to: number}",
+                    "description": "拖动结束信息"
+                }
+            ],
+            "usageExample": "<Table :data=\"data\" draggable @dragend=\"handleDragEnd\">",
+            "handlerExample": "const handleDragEnd = (info: {key: number, from: number, to: number}) => {\n  const item = data.value.splice(info.from, 1)[0];\n  data.value.splice(info.to, 0, item);\n};"
+        },
+        {
+            "name": "checkRow",
+            "vueEventName": "@check-row",
+            "description": "手动选中某行时触发",
+            "payload": [
+                {
+                    "name": "data",
+                    "type": "T",
+                    "description": "选中行数据"
+                },
+                {
+                    "name": "index",
+                    "type": "number",
+                    "description": "行索引"
+                },
+                {
+                    "name": "key",
+                    "type": "TableRowKey",
+                    "description": "行key"
+                }
+            ],
+            "usageExample": "<Table :data=\"data\" @check-row=\"handleCheckRow\">",
+            "handlerExample": "const handleCheckRow = (data: any, index: number, key: string | number) => {\n  console.log('选中行:', data);\n};"
+        },
+        {
+            "name": "uncheckRow",
+            "vueEventName": "@uncheck-row",
+            "description": "手动取消选中某行时触发",
+            "payload": [
+                {
+                    "name": "data",
+                    "type": "T",
+                    "description": "取消选中行数据"
+                },
+                {
+                    "name": "index",
+                    "type": "number",
+                    "description": "行索引"
+                },
+                {
+                    "name": "key",
+                    "type": "TableRowKey",
+                    "description": "行key"
+                }
+            ],
+            "usageExample": "<Table :data=\"data\" @uncheck-row=\"handleUncheckRow\">",
+            "handlerExample": "const handleUncheckRow = (data: any, index: number, key: string | number) => {\n  console.log('取消选中:', data);\n};"
+        },
+        {
+            "name": "checkAll",
+            "vueEventName": "@check-all",
+            "description": "手动全选触发",
+            "payload": [],
+            "usageExample": "<Table @check-all=\"handleCheckAll\" />"
+        },
+        {
+            "name": "uncheckAll",
+            "vueEventName": "@uncheck-all",
+            "description": "手动取消全选触发",
+            "payload": [],
+            "usageExample": "<Table @uncheck-all=\"handleUncheckAll\" />"
+        },
+        {
+            "name": "page",
+            "vueEventName": "@page",
+            "description": "当内置翻页改变页码或每页数量时触发",
+            "payload": [
+                {
+                    "name": "data",
+                    "type": "{value: number, limit: number}",
+                    "description": "分页信息"
+                }
+            ],
+            "usageExample": "<Table :data=\"data\" :pagination=\"true\" @page=\"handlePage\">",
+            "handlerExample": "const handlePage = (pageInfo: {value: number, limit: number}) => {\n  console.log('当前页:', pageInfo.value, '每页:', pageInfo.limit);\n};"
+        }
+    ],
+    "slots": [
+        {
+            "name": "empty",
+            "description": "自定义无数据展示模板",
+            "vueTemplate": "#empty",
+            "usageExample": "<Table :data=\"[]\">\n  <template #empty>\n    <div>暂无数据</div>\n  </template>\n</Table>"
+        },
+        {
+            "name": "expand",
+            "description": "指定行展开后要展示的模板内容",
+            "slotProps": [
+                {
+                    "name": "row",
+                    "type": "T",
+                    "description": "当前行数据",
+                    "destructuringExample": "[row]"
+                },
+                {
+                    "name": "index",
+                    "type": "number",
+                    "description": "行索引"
+                }
+            ],
+            "vueTemplate": "#expand=\"[row, index]\"",
+            "usageExample": "<Table :data=\"data\">\n  <template #expand=\"[row]\">\n    <div>{{ row.detail }}</div>\n  </template>\n</Table>"
+        },
+        {
+            "name": "footer",
+            "description": "自定义表格底部",
+            "vueTemplate": "#footer",
+            "usageExample": "<Table :data=\"data\">\n  <template #footer>\n    <div>总计: {{ total }}</div>\n  </template>\n</Table>"
+        },
+        {
+            "name": "tooltip",
+            "description": "行提示内容",
+            "slotProps": [
+                {
+                    "name": "data",
+                    "type": "T",
+                    "description": "当前行数据",
+                    "destructuringExample": "[data]"
+                },
+                {
+                    "name": "index",
+                    "type": "number",
+                    "description": "行索引"
+                }
+            ],
+            "vueTemplate": "#tooltip=\"[data, index]\"",
+            "usageExample": "<Table :data=\"data\">\n  <template #tooltip=\"[data]\">\n    <div>提示: {{ data.tip }}</div>\n  </template>\n</Table>"
+        }
+    ],
+    "methods": [
+        {
+            "name": "getCheckedData",
+            "description": "获取选中数据信息",
+            "params": [],
+            "returnType": "T[]",
+            "usageExample": "const tableRef = ref<InstanceType<typeof Table>>();\nconst checkedData = tableRef.value?.getCheckedData();"
+        },
+        {
+            "name": "getSelectedData",
+            "description": "获取高亮行数据信息",
+            "params": [],
+            "returnType": "T[]",
+            "usageExample": "const selectedData = tableRef.value?.getSelectedData();"
+        },
+        {
+            "name": "checkAll",
+            "description": "全部选中",
+            "params": [],
+            "returnType": "void",
+            "usageExample": "tableRef.value?.checkAll();"
+        },
+        {
+            "name": "uncheckAll",
+            "description": "全不选中",
+            "params": [],
+            "returnType": "void",
+            "usageExample": "tableRef.value?.uncheckAll();"
+        },
+        {
+            "name": "scrollToRowByIndex",
+            "description": "通过索引指定滚动的行",
+            "params": [
+                {
+                    "name": "index",
+                    "type": "number",
+                    "description": "行索引"
+                }
+            ],
+            "returnType": "Promise<void>",
+            "usageExample": "await tableRef.value?.scrollToRowByIndex(10);"
+        },
+        {
+            "name": "scrollToRowByKey",
+            "description": "通过key指定滚动的行",
+            "params": [
+                {
+                    "name": "key",
+                    "type": "TableRowKey",
+                    "description": "行key"
+                }
+            ],
+            "returnType": "Promise<void>",
+            "usageExample": "await tableRef.value?.scrollToRowByKey('row-id-123');"
+        },
+        {
+            "name": "exportTable",
+            "description": "导出表格",
+            "params": [
+                {
+                    "name": "data",
+                    "type": "T[]",
+                    "description": "要导出的数据",
+                    "optional": true,
+                    "default": "this.data"
+                },
+                {
+                    "name": "filename",
+                    "type": "string",
+                    "description": "导出文件名",
+                    "optional": true,
+                    "default": "\"table\""
+                }
+            ],
+            "returnType": "Promise<string>",
+            "usageExample": "const content = await tableRef.value?.exportTable(data.value, 'users');"
+        }
+    ],
+    "subComponents": [
+        {
+            "name": "TableColumn",
+            "description": "表格列定义",
+            "props": [
+                {
+                    "name": "key",
+                    "description": "指定当前列的key，必须指定",
+                    "type": {
+                        "raw": "string",
+                        "kind": "string"
+                    },
+                    "required": true,
+                    "usageExample": "<TableColumn key=\"name\" title=\"姓名\" />"
+                },
+                {
+                    "name": "title",
+                    "description": "列标题",
+                    "type": {
+                        "raw": "string | VNode",
+                        "kind": "union"
+                    },
+                    "required": false,
+                    "usageExample": "<TableColumn key=\"name\" title=\"姓名\" />"
+                },
+                {
+                    "name": "sortable",
+                    "description": "是否可排序",
+                    "type": {
+                        "raw": "boolean",
+                        "kind": "boolean"
+                    },
+                    "required": false,
+                    "default": "false",
+                    "usageExample": "<TableColumn key=\"age\" title=\"年龄\" sortable />"
+                },
+                {
+                    "name": "width",
+                    "description": "列宽，可以指定百分比或像素(像素不需要加单位)",
+                    "type": {
+                        "raw": "string",
+                        "kind": "string"
+                    },
+                    "required": false,
+                    "usageExample": "<TableColumn key=\"name\" title=\"姓名\" width=\"200\" />"
+                },
+                {
+                    "name": "group",
+                    "description": "指定分组数组，每一项格式为{value: '选中后的值', label: '展示的文案'}",
+                    "type": {
+                        "raw": "TableColumnGroupItem[]",
+                        "kind": "array"
+                    },
+                    "required": false,
+                    "default": "undefined"
+                },
+                {
+                    "name": "hideGroupHeader",
+                    "description": "是否隐藏group下拉菜单中header区域",
+                    "type": {
+                        "raw": "boolean",
+                        "kind": "boolean"
+                    },
+                    "required": false,
+                    "default": "false"
+                },
+                {
+                    "name": "multiple",
+                    "description": "分组是否支持多选",
+                    "type": {
+                        "raw": "boolean",
+                        "kind": "boolean"
+                    },
+                    "required": false,
+                    "default": "false"
+                },
+                {
+                    "name": "ignore",
+                    "description": "是否忽略当前列的导出",
+                    "type": {
+                        "raw": "boolean",
+                        "kind": "boolean"
+                    },
+                    "required": false,
+                    "default": "false"
+                },
+                {
+                    "name": "fixed",
+                    "description": "是否将列固定，\"left\"固定在左侧；\"right\"固定在右侧",
+                    "type": {
+                        "raw": "\"left\" | \"right\"",
+                        "kind": "union"
+                    },
+                    "required": false,
+                    "allowedValues": [
+                        {
+                            "value": "left",
+                            "label": "固定在左侧"
+                        },
+                        {
+                            "value": "right",
+                            "label": "固定在右侧"
+                        }
+                    ],
+                    "usageExample": "<TableColumn key=\"id\" title=\"ID\" fixed=\"left\" />"
+                },
+                {
+                    "name": "align",
+                    "description": "当前列对齐方式",
+                    "type": {
+                        "raw": "\"left\" | \"center\" | \"right\"",
+                        "kind": "union"
+                    },
+                    "required": false,
+                    "usageExample": "<TableColumn key=\"amount\" title=\"金额\" align=\"right\" />"
+                },
+                {
+                    "name": "exportTitle",
+                    "description": "自定义导出的标题",
+                    "type": {
+                        "raw": "string",
+                        "kind": "string"
+                    },
+                    "required": false,
+                    "default": "undefined"
+                },
+                {
+                    "name": "exportCell",
+                    "description": "自定义导出的单元格内容",
+                    "type": {
+                        "raw": "(data: any, index: number) => string",
+                        "kind": "function"
+                    },
+                    "required": false,
+                    "default": "undefined"
+                },
+                {
+                    "name": "minWidth",
+                    "description": "指定当前列拖动时的最小宽度，优先级高于Table的minColWidth",
+                    "type": {
+                        "raw": "number",
+                        "kind": "number"
+                    },
+                    "required": false,
+                    "default": "undefined"
+                },
+                {
+                    "name": "className",
+                    "description": "给当前列添加className",
+                    "type": {
+                        "raw": "string | Record<string, any>",
+                        "kind": "union"
+                    },
+                    "required": false,
+                    "default": "undefined"
+                },
+                {
+                    "name": "hidden",
+                    "description": "是否隐藏当前列，仅为不可见，不影响exportTable导出表格",
+                    "type": {
+                        "raw": "boolean",
+                        "kind": "boolean"
+                    },
+                    "required": false,
+                    "default": "false"
+                },
+                {
+                    "name": "ellipsis",
+                    "description": "是否开启超长省略",
+                    "type": {
+                        "raw": "boolean",
+                        "kind": "boolean"
+                    },
+                    "required": false,
+                    "default": "false",
+                    "usageExample": "<TableColumn key=\"desc\" title=\"描述\" ellipsis />"
+                }
+            ],
+            "slots": [
+                {
+                    "name": "title",
+                    "description": "自定义复杂表头内容",
+                    "vueTemplate": "#title",
+                    "usageExample": "<TableColumn key=\"custom\">\n  <template #title>自定义表头</template>\n</TableColumn>"
+                },
+                {
+                    "name": "template",
+                    "description": "自定义单元格内容",
+                    "slotProps": [
+                        {
+                            "name": "data",
+                            "type": "T",
+                            "description": "当前行数据",
+                            "destructuringExample": "[data]"
+                        },
+                        {
+                            "name": "index",
+                            "type": "number",
+                            "description": "行索引"
+                        }
+                    ],
+                    "vueTemplate": "#template=\"[data, index]\"",
+                    "usageExample": "<TableColumn key=\"action\" title=\"操作\">\n  <template #template=\"[data]\">\n    <Button @click=\"handleEdit(data)\">编辑</Button>\n  </template>\n</TableColumn>"
+                },
+                {
+                    "name": "default",
+                    "description": "与template扩展点等价，为了方便vue中使用的别名",
+                    "slotProps": [
+                        {
+                            "name": "data",
+                            "type": "T",
+                            "description": "当前行数据",
+                            "destructuringExample": "[data]"
+                        },
+                        {
+                            "name": "index",
+                            "type": "number",
+                            "description": "行索引"
+                        }
+                    ],
+                    "vueTemplate": "#default=\"[data, index]\"",
+                    "usageExample": "<TableColumn key=\"action\" title=\"操作\">\n  <template #default=\"[data]\">\n    <Button @click=\"handleEdit(data)\">编辑</Button>\n  </template>\n</TableColumn>"
+                }
+            ]
+        }
+    ],
+    "typeDefinitions": [
+        {
+            "name": "TableRowKey",
+            "definition": "type TableRowKey = string | number;",
+            "description": "表格行的唯一标识类型"
+        },
+        {
+            "name": "TableSortValue",
+            "definition": "type TableSortValue<T = string> = {\n  key?: T;\n  type?: 'desc' | 'asc';\n};",
+            "description": "排序状态类型"
+        }
+    ],
+    "examples": [
+        {
+            "id": "table_basic",
+            "title": "基础表格",
+            "description": "展示基本的表格用法",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Table, TableColumn } from '@king-design/vue';\n\nconst data = ref([\n  { name: '张三', age: 25, address: '北京' },\n  { name: '李四', age: 30, address: '上海' }\n]);\n</script>\n<template>\n  <Table :data=\"data\">\n    <TableColumn key=\"name\" title=\"姓名\" />\n    <TableColumn key=\"age\" title=\"年龄\" />\n    <TableColumn key=\"address\" title=\"地址\" />\n  </Table>\n</template>",
+            "tags": [
+                "basic"
+            ],
+            "usedProps": [
+                "data"
+            ],
+            "usedEvents": [],
+            "usedSlots": [],
+            "usedMethods": [],
+            "scenario": "创建一个简单的表格展示用户信息"
+        },
+        {
+            "id": "table_selectable",
+            "title": "可选择表格",
+            "description": "支持行选择的表格",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Table, TableColumn } from '@king-design/vue';\n\nconst data = ref([\n  { id: 1, name: '张三' },\n  { id: 2, name: '李四' }\n]);\nconst checkedKeys = ref<number[]>([]);\n</script>\n<template>\n  <Table :data=\"data\" checkType=\"checkbox\" v-model:checkedKeys=\"checkedKeys\" :rowKey=\"row => row.id\">\n    <TableColumn key=\"name\" title=\"姓名\" />\n  </Table>\n  <p>选中: {{ checkedKeys }}</p>\n</template>",
+            "tags": [
+                "checkbox",
+                "selection",
+                "v-model"
+            ],
+            "usedProps": [
+                "data",
+                "checkType",
+                "checkedKeys",
+                "rowKey"
+            ],
+            "usedEvents": [],
+            "usedSlots": [],
+            "usedMethods": [],
+            "scenario": "创建一个可多选的表格，支持获取选中行"
+        },
+        {
+            "id": "table_custom_cell",
+            "title": "自定义单元格",
+            "description": "使用插槽自定义单元格内容",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Table, TableColumn, Button, Tag } from '@king-design/vue';\n\nconst data = ref([\n  { name: '张三', status: 'active' },\n  { name: '李四', status: 'inactive' }\n]);\n</script>\n<template>\n  <Table :data=\"data\">\n    <TableColumn key=\"name\" title=\"姓名\" />\n    <TableColumn key=\"status\" title=\"状态\">\n      <template #default=\"[row]\">\n        <Tag :type=\"row.status === 'active' ? 'success' : 'warning'\">\n          {{ row.status === 'active' ? '激活' : '未激活' }}\n        </Tag>\n      </template>\n    </TableColumn>\n    <TableColumn key=\"action\" title=\"操作\">\n      <template #default=\"[row]\">\n        <Button type=\"primary\" size=\"small\">编辑</Button>\n      </template>\n    </TableColumn>\n  </Table>\n</template>",
+            "tags": [
+                "slot",
+                "custom",
+                "template"
+            ],
+            "usedProps": [
+                "data"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "default"
+            ],
+            "usedMethods": [],
+            "scenario": "创建带有状态标签和操作按钮的表格"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "table_slot_destructuring",
+            "description": "TableColumn 作用域插槽参数解构方式错误",
+            "wrongCode": "<template #default=\"{ row }\">",
+            "correctCode": "<template #default=\"[row]\">",
+            "explanation": "KPC 组件库使用数组形式传递作用域插槽参数，而非对象解构。正确写法是 [row] 或 [row, index]，不是 { row } 或 { row, index }",
+            "relatedProps": []
+        },
+        {
+            "id": "table_missing_key",
+            "description": "TableColumn 未设置 key 属性",
+            "wrongCode": "<TableColumn title=\"姓名\" />",
+            "correctCode": "<TableColumn key=\"name\" title=\"姓名\" />",
+            "explanation": "TableColumn 的 key 属性是必须的，用于标识列和数据映射",
+            "relatedProps": [
+                "key"
+            ]
+        },
+        {
+            "id": "table_rowkey_missing",
+            "description": "使用选择功能时未设置 rowKey",
+            "wrongCode": "<Table :data=\"data\" checkType=\"checkbox\" v-model:checkedKeys=\"keys\">",
+            "correctCode": "<Table :data=\"data\" checkType=\"checkbox\" v-model:checkedKeys=\"keys\" :rowKey=\"row => row.id\">",
+            "explanation": "使用 checkType 进行行选择时，应该设置 rowKey 来唯一标识每行，否则默认使用数组索引，数据变化时可能导致选中状态错乱",
+            "relatedProps": [
+                "checkType",
+                "rowKey",
+                "checkedKeys"
+            ]
+        },
+        {
+            "id": "table_column_prop_error",
+            "description": "TableColumn 错误使用 prop 属性",
+            "wrongCode": "<TableColumn prop=\"name\" />",
+            "correctCode": "<TableColumn key=\"name\" />",
+            "explanation": "KPC TableColumn 使用 `key` 属性来指定数据字段，而不是 `prop`。",
+            "relatedProps": [
+                "key"
+            ]
+        },
+        {
+            "id": "table_column_label_error",
+            "description": "TableColumn 错误使用 label 属性",
+            "wrongCode": "<TableColumn label=\"姓名\" />",
+            "correctCode": "<TableColumn title=\"姓名\" />",
+            "explanation": "KPC TableColumn 使用 `title` 属性来指定列标题，而不是 `label`。",
+            "relatedProps": [
+                "title"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "表格",
+        "table",
+        "列表",
+        "数据展示",
+        "选择",
+        "排序",
+        "分页",
+        "固定列",
+        "树形",
+        "虚拟滚动"
+    ],
+    "useCases": [
+        "用户列表展示",
+        "可选择的数据表格",
+        "带分页的数据列表",
+        "固定表头的长表格",
+        "可排序的数据分析表格",
+        "带操作列的管理表格"
+    ],
+    "relatedComponents": [
+        "TableColumn",
+        "Pagination"
+    ]
+}