@king-design/intact 2.0.0-beta.1 → 2.0.2

package/components/slider/index.md

@@ -9,30 +9,45 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| min | 最小值 | `Number` | 0 |
-| max | 最大值 | `Number` | 100 |
-| value | 当前值，可用`v-model`双向绑定 | `Number` | `Array` | `min` |
-| range | 是否是范围选择 | `Boolean` | `false` |
-| unit | 单位，用于刻度展示 | `String` | `""` |
-| showEnd | 是否展示最小值和最大值刻度 | `Boolean` | `true` |
-| showInput | 是否展示输入框 | `Boolean` | `true` |
-| step | 步长，支持动态步长，详见示例 | `Number` | `Object` | `1` |
-| forceStep | 是否限制`value`除边界之外，满足`min + step * n`(`n`为整数) | `Boolean` | `true` |
+| max | 最大值 | `number` | 100 |
+| min | 最小值 | `number` | 0 |
+| value | 当前值，可用`v-model`双向绑定 | `number` | `[number, number]` | `0` |
+| range | 是否是范围选择 | `boolean` | `false` |
+| unit | 单位，用于刻度展示 | `string` | `""` |
+| showEnd | 是否展示最小值和最大值刻度 | `boolean` | `true` |
+| showInput | 是否展示输入框 | `boolean` | `true` |
+| step | 步长，支持动态步长，详见示例 | `number` | `StepObject` | `StepFunction` | `1` |
 | points | 是否展示间隔点，或者指定哪些值展示间隔点 | `boolean` | `number[]` | `false` |
-| marks | 标注刻度 | `Object` | `undefined` |
-| showTooltip | 是否展示提示气泡，默认不展示 | `Boolean` | `false` |
-| always | 当展示气泡时，是否一直展示 | `Boolean` | `false` |
-| animate | 滑块的移动是否使用缓动动画 | `Boolean` | `true` |
-| tooltipProps | 设置`Tooltip`的所有属性 | `Object` | `undefined` |
+| marks | 标注刻度 | `Marks` | `undefined` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| showTooltip | 是否展示提示气泡，默认不展示 | `boolean` | `false` |
+| always | 当展示气泡时，是否一直展示 | `boolean` | `false` |
+| animate | 滑块的移动是否使用缓动动画 | `boolean` | `true` |
+| tooltipProps | 设置内置的`Tooltip`的所有属性 | `TooltipProps`见[Tooltip](/components/tooltip/) | `undefined` |
+| spinnerProps | 设置内置的`Spinner`的所有属性 | `SpinnerProps`见[Spinner](/components/spinner/) | `undefined` |
+| forceStep | 是否限制`value`除边界之外，满足`min + step * n`(`n`为整数) | `boolean` | `true` |
+
+```ts
+export type StepObject = {
+    [key in number]: number
+} & {
+    $?: number
+}
+export type StepFunction = (value: number) => number
+
+type MarkKey = string | number
+type MarkValue = MarkKey | [MarkKey] | [MarkKey, MarkKey]
+type Marks = Record<MarkKey, MarkValue>
+```
 
 # 扩展点
 
 | 名称 | 说明 | 参数 |
 | --- | --- | --- |
-| tooltip | 当展示提示气泡，定义气泡的内容，和`Tooltip`组件行为一样，如果你传入空的内容，则不会展示气泡 | 当前组件取值`value` |
+| tooltip | 当展示提示气泡，定义气泡的内容，和`Tooltip`组件行为一样，如果你传入空的内容，则不会展示气泡 | <code>(value: number &#124; [number, number]) => Children</code> |
 
 # 事件
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| change | 当值`value`变化时触发，和`$change:value`默认事件不同的是，拖动过程中不会触发，而是拖动结束触发 | `value` |
+| change | 当值`value`变化时触发，拖动过程中不会触发，而是拖动结束触发 | <code>(newValue: number &#124; [number, number], oldValue: number &#124; [number, number]) => void</code> |

package/components/slider/styles.ts

@@ -4,6 +4,7 @@ import {deepDefaults} from '../../styles/utils';
 import '../../styles/global';
 
 const defaults = {
+    get transition() { return theme.transition.middle },
     height: '4px',
     
     bgColor: '#e5e5e5',
@@ -46,7 +47,7 @@ const defaults = {
     }
 };
 
-let slider: any;
+let slider: typeof defaults;
 setDefault(() => {
     slider = deepDefaults(theme, {slider: defaults}).slider;
 });
@@ -78,19 +79,19 @@ export function makeStyles() {
             position: absolute;
             height: 100%;
             border-radius: ${slider.borderRadius};
-            transition: all ${theme.transition};
+            transition: all ${slider.transition};
         }
         .k-slider-thumb-wrapper {
             position: absolute;
             top: 50%;
             transform: translate(-50%, -50%);
-            transition: left ${theme.transition};
+            transition: left ${slider.transition};
             z-index: 1;
         }
         .k-slider-thumb {
             height: ${slider.thumb.height};
             width: ${slider.thumb.width};
-            transition: all ${theme.transition};
+            transition: all ${slider.transition};
             border: ${slider.thumb.border};
             border-radius: ${slider.thumb.borderRadius};
             background-color: ${slider.thumb.bgColor};

package/components/spin/index.md

@@ -10,8 +10,8 @@ sidebar: doc
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | size | 组件尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
-| center | 是否居中展示，需要父元素为定位元素 | `Boolean` | `false` |
-| overlay | 是否展示带遮罩层的加载动画，需要父元素为定位元素 | `Boolean` | `false` |
+| center | 是否居中展示，需要父元素为定位元素 | `boolean` | `false` |
+| overlay | 是否展示带遮罩层的加载动画，需要父元素为定位元素 | `boolean` | `false` |
 
 # 扩展点
 

package/components/spin/styles.ts

@@ -13,7 +13,7 @@ const defaults = {
     miniWidth: `24px`,
 };
 
-let spin: any;
+let spin: typeof defaults;
 setDefault(() => {
     spin = deepDefaults(theme, {spin: defaults}).spin;
 });

package/components/spinner/index.md

@@ -9,23 +9,32 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 组件的值，可用`v-model`进行双向绑定 | `Number` | `0` |
-| max | 最大值 | `Number` | `Number.POSITIVE_INFINITY` |
-| min | 最小值 | `Number` | `Number.NEGATIVE_INFINITY` | 
-| step | 步长，支持动态步长，详见示例 | `Number` | `Object` | `1` |
-| disabled | 是否禁用 | `Boolean` | `false` |
+| value | 组件的值，可用`v-model`进行双向绑定 | `number` | `0` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| max | 最大值 | `number` | `Number.POSITIVE_INFINITY` |
+| min | 最小值 | `number` | `Number.NEGATIVE_INFINITY` | 
+| step | 步长，支持动态步长，详见示例 | `number` | `StepObject` | `StepFunction` | `1` |
 | size | 尺寸 | `"default"` | `"small"` | `"mini"` | `"default"` |
-| vertical | 控制按钮是否竖直排列 | `Boolean` | `false` |
-| precision | 控制展示精度，该值必须为正整数或0 | `Number` | `undefined` |
-| formatter | 定义格式化展示值的函数 | `Function` | `undefined` |
-| parser | 与`formatter`结合使用，定义解析格式化的值的函数 | `Function` | `undefined` |
-| prefix | 定义展示的值的前缀，优先级低于`formatter` | `String` | `undefined` |
-| suffix | 定义展示的值的后缀，优先级低于`formatter` | `String` | `undefined` |
-| width | 指定`Input`输入框的宽度 | `String` | `Number` | `undefined` |
-| forceStep | `value`值除了边界值，都必须被满足`min + step * n`(`n`为整数) | `Boolean` | `false` |
+| vertical | 控制按钮是否竖直排列 | `boolean` | `false` |
+| precision | 控制展示精度，该值必须为正整数或0 | `number` | `undefined` |
+| formatter | 定义格式化展示值的函数 | `(value: number) => string` | `undefined` |
+| parser | 与`formatter`结合使用，定义解析格式化的值的函数 | `(value: string) => number` | `undefined` |
+| prefix | 定义展示的值的前缀，优先级低于`formatter` | `string` | `undefined` |
+| suffix | 定义展示的值的后缀，优先级低于`formatter` | `string` | `undefined` |
+| width | 指定`Input`输入框的宽度 | `string` | `number` | `undefined` |
+| forceStep | `value`值除了边界值，都必须被满足`min + step * n`(`n`为整数) | `boolean` | `false` |
+
+```ts
+export type StepObject = {
+    [key in number]: number
+} & {
+    $?: number
+}
+export type StepFunction = (value: number) => number
+```
 
 # 事件
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| change | `value`值变化时触发，与默认事件`$change:value`不同的是，该事件仅在`input` `change`事件触发或者点击加减按钮改变`value`时触发 | `value` |
+| change | `value`值变化时触发，与默认事件`$change:value`不同的是，该事件仅在`input` `change`事件触发或者点击加减按钮改变`value`时触发 | `(value: number) => void` |

package/components/spinner/index.ts

@@ -9,8 +9,8 @@ import {useChange} from './useChange';
 import type {Events} from '../types';
 
 export interface SpinnerProps {
-    disabled?: boolean,
     value?: number,
+    disabled?: boolean,
     max?: number,
     min?: number,
     step?: number | StepObject | StepFunction,
@@ -39,8 +39,8 @@ type Formatter = (value: number) => string
 type Parser = (value: string) => number
 
 const typeDefs: Required<TypeDefs<SpinnerProps>> = {
-    disabled: Boolean,
     value: Number,
+    disabled: Boolean,
     max: Number,
     min: Number,
     step: [Number, Object, Function],

package/components/spinner/styles.ts

@@ -37,7 +37,7 @@ const defaults = {
     }
 };
 
-let spinner: any;
+let spinner: typeof defaults;
 setDefault(() => {
     spinner = deepDefaults(theme, {spinner: defaults}).spinner;
 });

package/components/split/index.md

@@ -10,10 +10,10 @@ sidebar: doc
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | mode | 指定分割模式，`horizontal`水平分割；`vertical`垂直分割 | `"horizontal"` | `"vertical"` | `"horizontal"` |
-| firstSize | 指定第一个面板的大小，需要带单位 | `String` | `"auto"` |
-| lastSize | 指定第二个面板的大小，需要带单位 | `String` | `"auto"` |
-| min | 指定面板最小尺寸，不用带单位，可以通过百分比指定 | `Number` | `String` | `0` |
-| max | 指定面板最大尺寸，不用带单位，可以通过百分比指定 | `Number` | `String` | `"100%-6"` |
+| firstSize | 指定第一个面板的大小，需要带单位 | `string` | `"auto"` |
+| lastSize | 指定第二个面板的大小，需要带单位 | `string` | `"auto"` |
+| min | 指定面板最小尺寸，不用带单位，可以通过百分比指定 | `number` | `string` | `0` |
+| max | 指定面板最大尺寸，不用带单位，可以通过百分比指定 | `number` | `string` | `"100%-6"` |
 
 # 扩展点
 
@@ -27,6 +27,6 @@ sidebar: doc
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| moveStart | 开始拖动面板分割线时触发 | `Event` |
-| moving | 拖动面板分割线的过程中触发 | `Event` |
-| moveEnd | 拖动面板分割线结束时触发 | `Event` |
+| moveStart | 开始拖动面板分割线时触发 | `(e: MouseEvent) => void` |
+| moving | 拖动面板分割线的过程中触发 | `(e: MouseEvent) => void` |
+| moveEnd | 拖动面板分割线结束时触发 | `(e?: MouseEvent) => void` |

package/components/split/style.ts

@@ -14,7 +14,7 @@ const defaults = {
     dragLiensGutter: 5,
     get bgColor() { return theme.color.bg },
     get baseBorder() { return `1px solid ${theme.color.border}` },
-    get transition() { return theme.transition },
+    get transition() { return theme.transition.middle },
     get boderColor() { return theme.color.border },
     get dragLineMargin(): string {
         return `-${split.dragLinesCount * (split.dragLiensGutter + 1) / 2}px`;
@@ -34,7 +34,7 @@ const defaults = {
     }
 };
 
-let split: any;
+let split: typeof defaults;
 setDefault(() => {
     split = deepDefaults(theme, {split: defaults}).split;
 });

package/components/steps/index.md

@@ -11,13 +11,13 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 标识当前第几步，从`0`开始 | `Number` | `undefined` |
+| value | 标识当前第几步，从`0`开始 | `number` | `undefined` |
 | status | 步骤条的状态 | `"normal"` | `"error"` | `"normal"` |
 | type | 步骤条样式 | `"default"` | `"line"` | `"simple"` | `"default"` |
-| clickable | 是否支持快速切换【已完成】的步骤 | `Boolean` | `false` |
+| clickable | 是否支持快速切换【已完成】的步骤 | `boolean` | `false` |
 
 ## Step
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| title | 标题 | `String` | `undefined` |
+| title | 标题 | `string` | `undefined` |

package/components/steps/styles.ts

@@ -4,6 +4,7 @@ import {deepDefaults}  from '../../styles/utils';
 import '../../styles/global';
 
 const defaults = {
+    get transition() { return theme.transition.middle },
     get height() { return theme.default.height }, 
     get bgColor() { return theme.color.bg }, 
     gutter: '10px',
@@ -75,7 +76,7 @@ const defaults = {
     }
 };
 
-let steps: any;
+let steps: typeof defaults;
 setDefault(() => {
     steps = deepDefaults(theme, {steps: defaults}).steps;
 });
@@ -332,7 +333,7 @@ export function makeStepStyles() {
         }
         .k-step-inner,
         .k-step-main {
-            transition: all ${theme.transition};
+            transition: all ${steps.transition};
         }
     `;
 }

package/components/switch/index.md

@@ -12,16 +12,16 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| name | 可定义当前开关的名称 | `String` | `undefined` |
-| on | 定义开启时显示文案 | `String` | `undefined` |
-| off | 定义关闭时显示文案 | `String` | `undefined` |
-| width | 开关的宽度 | `Number` | `undefined` |
-| height | 开关的高度 | `Number` | `undefined` |
-| size | 开关的型号 | `String` | `"default"` |
-| disabled | 控制禁用 | `Boolean` | `false` |
-| value | 开关当前值，可用`v-model`双向绑定 | `*` | `false` |
-| trueValue | 开启时的值 | `*` | `true` |
-| falseValue | 关闭时的值 | `*` | `false` |
+| name | 可定义当前开关的名称 | `string` | `undefined` |
+| on | 定义开启时显示文案 | `string` | `undefined` |
+| off | 定义关闭时显示文案 | `string` | `undefined` |
+| value | 开关当前值，可用`v-model`双向绑定 | `any` | `false` |
+| trueValue | 开启时的值 | `any` | `true` |
+| falseValue | 关闭时的值 | `any` | `false` |
+| width | 开关的宽度 | `number` | `string` | `undefined` |
+| height | 开关的高度 | `number` | `string` | `undefined` |
+| size | 尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
+| disabled | 控制禁用 | `boolean` | `false` |
 
 # 扩展点
 
@@ -29,12 +29,3 @@ sidebar: doc
 | --- | --- |
 | on | 扩展开启时的文案 |
 | off | 扩展关闭时的文案 |
-
-
-# 方法
-
-| 方法名 | 说明 | 参数 | 返回值 |
-| --- | --- | --- | --- |
-| isChecked | 判断是否开启 | - | `Boolean` |
-| check | 开启按钮 | - | `undefined` |
-| uncheck | 关闭按钮 | - | `undefined` |

package/components/switch/styles.ts

@@ -4,6 +4,7 @@ import {deepDefaults, sizes} from '../../styles/utils';
 import '../../styles/global';
 
 const defaults = {
+    get transition() { return theme.transition.middle },
     bgColor: `#fff`,
     fontSize: `12px`,
     get color() { return theme.color.text },
@@ -51,7 +52,7 @@ const defaults = {
     get disabledBgColor() { return theme.color.disabledBg },
 };
 
-let kswitch: any;
+let kswitch: typeof defaults;
 setDefault(() => {
     kswitch = deepDefaults(theme, {switch: defaults}).switch;
 });
@@ -90,14 +91,14 @@ export function makeStyles() {
         .k-switch-wrapper {
             height: 100%;
             background: ${kswitch.bgColor};
-            transition: all ${theme.transition};
+            transition: all ${kswitch.transition};
         }
         .k-switch-handle {
             border-radius: ${kswitch.handleBorderRadius};
             background: ${kswitch.handleBgColor};
             height: 100%;
             cursor: pointer;
-            transition: left ${theme.transition};
+            transition: left ${kswitch.transition};
             display: inline-block;
             img {
                 height: 100%;
@@ -119,7 +120,7 @@ export function makeStyles() {
             .k-switch-bar,
             .k-switch-wrapper {
                 background: ${kswitch.checkedBgColor};
-                transition: background ${theme.transition};
+                transition: background ${kswitch.transition};
             }
         }
         &:focus {

package/components/table/demos/animation.md

@@ -0,0 +1,92 @@
+---
+title: 动效
+order: 20
+---
+
+一个简单的`Table`，点击按钮，即可查看新增表格的动效。
+
+```vdt
+import {Table, TableColumn, Button} from 'kpc';
+
+<div>
+    <Button type="primary" ev-click={this.addRow}>增加一行</Button>
+    <Button type="primary" ev-click={this.removeRow}>删除一行</Button>
+    <Button type="primary" ev-click={this.toggleColumn}>
+        <template v-if={this.get('isShow')}>删除</template>
+        <template v-else>增加</template>
+        一列
+    </Button>
+    <Table data={this.get('data')} resizable rowKey={row => row.a}>
+        <TableColumn key="a" title="Title 1" />
+        <TableColumn v-if={this.get('isShow')} key="b" title="Title 2"/>
+        <TableColumn key="c" title="Title 3" />
+    </Table>
+</div>
+```
+
+```styl
+.k-btn
+    margin-right 20px
+.k-table, .k-btn
+    margin-bottom 20px
+```
+
+```ts
+import {bind} from 'kpc/components/utils';
+
+interface Props {
+    data: any[]
+    num: number
+    isShow: boolean
+}
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            data: [
+                {
+                    a: 'Cell 1-1', 
+                    b: 'Cell 1-2', 
+                    c: 'Cell 1-3'
+                },
+                {
+                    a: 'Cell 2-1', 
+                    b: 'Cell 2-2', 
+                    c: 'Cell 2-3'
+                }
+            ],
+            num: 3,
+            isShow: false,
+        }
+    }
+            
+    @bind
+    addRow() {
+        const num = this.get('num');
+        const data = this.get('data').slice();
+        data.push({
+            a: `Cell ${num}-1`, 
+            b: `Cell ${num}-2`, 
+            c: `Cell ${num}-3`
+        });
+        this.set({
+            data,
+            num: num + 1
+        });
+    }
+
+    @bind
+    removeRow() {
+        const data = this.get('data').slice();
+        data.shift();
+        this.set({data});
+    }
+
+    @bind
+    toggleColumn() {
+        this.set('isShow', !this.get('isShow'));
+    }
+}
+```

package/components/table/demos/basic.md

@@ -3,7 +3,7 @@ title: 基本用法
 order: 0
 ---
 
-上面是一个简单的`Table`，通过`data`属性设置表格展示的数据，通过`scheme`属性或者`TableColumn`
+一个简单的`Table`，通过`data`属性设置表格展示的数据，通过`TableColumn`
 组件定义表格结构，详见”定义表格结构“说明
 
 ```vdt

package/components/table/demos/checkedKeys.md

@@ -3,9 +3,8 @@ title: 行选中
 order: 4
 ---
 
-通过`checkedKeys`来控制哪些列被选中，默认他们的取值
-为行的索引或索引数组。但我们也可以通过`rowKey`函数为每一行指定唯一的`key`，此时他们的取值为`key`值
-或`key`值的数组
+通过`checkedKeys`来控制哪些列被选中，默认他们的取值为行`key`组成的数组。通过`rowKey`函数为每一行
+指定唯一的`key`，否则`key`和行号`index`等价
 
 ```vdt
 import {Table, TableColumn} from 'kpc';

package/components/table/demos/disableRow.md

@@ -3,8 +3,8 @@ title: 禁用行可选
 order: 9
 ---
 
-`disableRow`：禁用某一行可选状态，类型：`Function`，默认：`function(data, index) { return false }`，该函数
-如果返回`true`，则表示禁用该行可选
+`disableRow`：禁用某一行可选状态，类型：`(data: T, index: number, key: TableRowKey) => boolean`，
+默认：`(data: T, index: number) => false`，该函数如果返回`true`，则表示禁用该行可选
 
 对于`disabled`的行，它的选中状态不会随全选/反全选而改变
 

package/components/table/demos/empty.md

@@ -3,7 +3,7 @@ title: 自定义无内容时的展示信息
 order: 16
 ---
 
-当`data`为空数组`[]`时, 通过`empty`扩展点，来定义无数据是展示的内容
+当`data`为空时, 通过`empty`扩展点，来定义无数据是展示的内容
 
 ```vdt
 import {Table, TableColumn} from 'kpc';

package/components/table/demos/export.md

@@ -3,19 +3,20 @@ title: 导出表格
 order: 22
 ---
 
-调用`Table`的`exportTable([data, [filename]])`方法，可以导出当前表格内容成`csv`格式。导出的文本
-默认为当前单元格下的`textContent`内容，当需要自定义导出文本时，我们可以给`TableColumn`指定`exportCell`
-函数来返回要导出的单元格内容。当需要自定义导出标题时，我们可以给当前列`TableColumn`组件添加`exportTitle`
-属性来指定。另外如果给当前列设置`ignore`属性，则会忽略该列内容，例如：本例中我们忽略”操作“栏内容
+调用`Table`的`exportTable: (data: T[] = this.get('data'), filename = 'table') => Promise<string>`方法，
+可以导出当前表格内容成`csv`格式。导出的文本默认为当前单元格下的`textContent`内容，当需要自定义导出文本时，
+我们可以给`TableColumn`指定`exportCell`函数来返回要导出的单元格内容。当需要自定义导出标题时，我们可以给
+当前列`TableColumn`组件添加`exportTitle`属性来指定。另外如果给当前列设置`ignore`属性，则会忽略该列内容，
+例如：本例中我们忽略”操作“栏内容
 
-1. `data` 要导出的数据，默认为当前表格的数据
+1. `data` 要导出的数据，默认为当前表格的数据，我们可以利用传入自定义的`data`数据来全量导出，而非仅仅当前
+    表格的内容
 2. `filename` 下载的文件名，默认为`table`
 
 > 对于合并了表头和单元格的表格，不支持导出（csv格式文件不能合并单元格）
 
 ```vdt
-import {Table, TableColumn} from 'kpc';
-import {Button} from 'kpc';
+import {Table, TableColumn, Button} from 'kpc';
 
 <div>
     <Button type="primary" ev-click={this.exportTable}>导出表格</Button>

package/components/table/demos/fixColumn.md

@@ -3,10 +3,10 @@ title: 列固定
 order: 14
 ---
 
-给`TableColumn`或者`scheme`添加`fixed`属性，可以将列固定，其中`left`固定在左侧，`right`固定在右侧；
+给`TableColumn`添加`fixed`属性，可以将列固定，其中`left`固定在左侧，`right`固定在右侧；
 固定的列依然支持`resizable`表头拖动，`stickHeader`表头吸顶，以及`fixHeader`表头固定
 
-> 固定列通过`position: sticky`来实现，所以对于不是首列或者尾列的列，需要指定它们之前或之后的列的固定宽度`width`来
+> 固定列通过`position: sticky`来实现，所以对于非首/尾列，需要指定它们之前或之后的列的固定宽度`width`来
 > 帮助该列来确定固定的位置 
 
 ```vdt

package/components/table/demos/fixHeader.md

@@ -3,10 +3,10 @@ title: 表头固定
 order: 10
 ---
 
-`fixHeader`：设置表头固定，类型`Boolean` | `Number`，默认：`false`
+`fixHeader`：设置表头固定，类型`boolean` | `number`，默认：`false`
 
-1. 如果取值为`Boolean`，`false`表示不固定表头，`true`表示固定高度，`tbody`的高度自适应，但需要自己定义表格高度
-2. 如果取值为`Number`，则表示，当表格超出该高度时即展示滚动条，并固定表头
+1. 如果取值为`boolean`，`false`表示不固定表头，`true`表示固定高度，`tbody`的高度自适应，但需要自己定义表格高度
+2. 如果取值为`number`，则表示，当表格超出该高度时即展示滚动条，并固定表头
 
 ```vdt
 import {Table, TableColumn} from 'kpc';

package/components/table/demos/group.md

@@ -5,13 +5,13 @@ order: 18
 
 分组需要两个`group`来指定：
 
-1. 第一个是`Table`上的`group`属性，该属性指定当前分组的方式，形式为：`{["分组的列的key"]: ["当前列选择的分组的值"]}`
-2. 第二个是`TableColumn`或者`scheme`上的`group`属性，该属性指定当前列有哪些可选的分组方式，
+1. 第一个是`Table`上的`group`属性，该属性指定当前分组的方式，形式为：`{key: ["分组的列的key"], value: ["当前列选择的分组的值"]}`
+2. 第二个是`TableColumn`的`group`属性，该属性指定当前列有哪些可选的分组方式，
 如果该列支持多选，还可以添加`multiple`属性，默认为单选。形式为：`[{label: "分组展示文案", value: "选择后的值"}]`
 
 当分组方式改变时，可以监听默认事件`$change:group`来执行自定义分组逻辑
 
-> `group`改变时，你应该同步更新当前属性值(`sort`也一样)
+> `group`改变时，你应该双向同步更新当前属性值(`sort`也一样)
 
 ```vdt
 import {Table, TableColumn} from 'kpc';

package/components/table/demos/mergeCell.md

@@ -3,7 +3,7 @@ title: 合并单元格
 order: 15
 ---
 
-通过`merge`属性指定一个函数来定义合并单元格的逻辑，函数返回的结果`{colspan, rowspan}`用来定义单元格占用的行列数。
+通过`merge`属性指定一个函数来定义合并单元格的逻辑，函数返回的结果`{colspan?: number, rowspan?: number}`用来定义单元格占用的行列数。
 组件传入函数的参数如下：
 
 1. `row` 当前行数据

package/components/table/demos/resizable.md

@@ -3,7 +3,7 @@ title: 表头是否可拖动
 order: 20
 ---
 
-`resizable`：表头是否可拖动，类型`Boolean`，`false`(默认)。`Table`支持持久化存储列宽信息，只需要通过
+`resizable`：表头是否可拖动，类型`boolean`，`false`(默认)。`Table`支持持久化存储列宽信息，只需要通过
 `widthStoreKey`指定保存到`localStorage`中的`key`就可以了，这样下次渲染`Table`时会使用上次的列宽信息
 进行渲染
 

package/components/table/demos/rowClassName.md

@@ -3,7 +3,7 @@ title: 行样式
 order: 7
 ---
 
-`rowClassName`：给行添加样式，类型`Function`，默认：`function(value, index) {  }`，该函数返回的
+`rowClassName`：给行添加样式，类型`(value: T, index: number, key: TableRowKey) => string | undefined`，该函数返回的
 字符串将被当做`className`添加到该行上
 
 你也可以直接添加`stripe`属性，使相邻行展示不同的背景色

package/components/table/demos/rowExpandable.md

@@ -3,13 +3,9 @@ title: 行展开
 order: 8
 ---
 
-通过`expand`block指定行展开后的模板内容。是否支持点击该行任何区域都展开内容，
+通过`expand`扩展点指定行展开后的模板内容。是否支持点击该行任何区域都展开内容，
 是由`rowExpandable`控制的，默认情况下它为`true`。你也可以将它设为`false`，来自定义展开逻辑。例如：
-点击某个`icon`后展开改行，而点击其它元素无效。自定义展开逻辑，需要调用`shrinkRow(key)`和`expandRow(key)`
-方法来实现收起和展开，或者修改`expandedKeys`属性值，来指定哪些`key`对应的行展开。
-
-* `rowExpandable`：是否点击整行即展开，类型`Boolean`，默认`true`
-* `expandedKeys`：指定哪些`key`对应行展开，类型`Array`，默认`[]`
+点击某个`icon`后展开改行，而点击其它元素无效。自定义展开逻辑，修改`expandedKeys`属性值，来指定哪些`key`对应的行展开。
 
 ```vdt
 import {Table, TableColumn} from 'kpc';