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

package/components/table/demos/sort.md

@@ -7,7 +7,7 @@ order: 17
 
 `{ key: '当前排序的列的key', type: '当前排序方式（desc: 降序，asc: 升序）' }`
 
-当该列可排序时，只需要在定义表格结构的`scheme`或者`TableColumn`中加入`sortable`并且取值为`true`即可
+当该列可排序时，只需要在`TableColumn`中加入`sortable`即可
 
 当排序方式改变时，可以监听默认事件`$change:sort`来执行自定义排序逻辑
 
@@ -17,6 +17,7 @@ import {Table, TableColumn} from 'kpc';
 <Table data={this.get('data')} 
     sort={this.get('sort')}
     ev-$change:sort={this._onSort}
+    rowKey={item => item.name}
 >
     <TableColumn title='姓名' key='name' sortable />
     <TableColumn title='年龄' key='age' sortable />

package/components/table/demos/stickHeader.md

@@ -3,10 +3,10 @@ title: 表头吸顶
 order: 11
 ---
 
-`stickHeader`：设置表头是否当表格滚动超出规定高度时，将表头固定在页面顶部，类型`Boolean` | `Number`，默认：`false`
+`stickHeader`：设置页面滚动使表头距视窗超出小于等于当前取值（默认为：0）时，将表头固定在页面顶部，类型`boolean` | `number`，默认：`false`
 
-1. 如果取值为`Boolean`，`false`表示不吸顶，`true`表示吸顶，此时等价于`0`，表示固定的位置的`top`为`0`
-2. 如果取值为`Number`，用来指定固定的位置距离视窗顶部的距离，例如本例中，固定在`top = 87px`的地方
+1. 如果取值为`boolean`，`false`表示不吸顶，`true`表示吸顶，此时等价于`0`，表示固定的位置的`top`为`0`
+2. 如果取值为`number`，用来指定固定的位置距离视窗顶部的距离，例如本例中，固定在`top = 64px`的地方
 
 > 表头吸顶后会`fixed`，此时`document.body`不要出现横向滚动条，否则横向滚动后，表格体位置变了而表头位置不会变
 

package/components/table/demos/stickScrollbar.md

@@ -3,10 +3,10 @@ title: 横向滚动条吸底
 order: 13
 ---
 
-`stickScrollbar`：当出现横向滚动条时，设置是否当表格底部没有滚动到视窗中时，将横向滚动条固定在页面底部，类型`Boolean` | `Number`，默认：`false`
+`stickScrollbar`：当出现横向滚动条时，设置是否当表格底部没有滚动到视窗中时，将横向滚动条固定在页面底部，类型`boolean` | `number`，默认：`false`
 
-1. 如果取值为`Boolean`，`false`表示不吸底，`true`表示吸底，此时等价于`0`，表示固定的位置的`bottom`为`0`
-2. 如果取值为`Number`，用来指定固定位置距离视窗底部的距离
+1. 如果取值为`boolean`，`false`表示不吸底，`true`表示吸底，此时等价于`0`，表示固定的位置的`bottom`为`0`
+2. 如果取值为`number`，用来指定固定位置距离视窗底部的距离
 
 > 滚动条吸底后会`fixed`，此时`document.body`不要出现横向滚动条，否则横向滚动后，表格位置而滚动条位置不会变
 

package/components/table/demos/tooltip.md

@@ -4,8 +4,7 @@ order: 23
 ---
 
 通过`tooltip`扩展点，可以定义表格行的提示信息，通过`tooltipPosition`属性可以定义提示信息的弹出位置，
-通过`tooltipContainer`指定提示层元素插入的位置。
-组件会将当前行的数据和索引传入该扩展点
+通过`tooltipContainer`指定提示层元素插入的位置。组件会将当前行的数据和索引传入该扩展点
 
 ```vdt
 import {Table, TableColumn} from 'kpc';

package/components/table/index.md

@@ -11,62 +11,96 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| data | 表格数据 | `Array` | `[]` |
-| scheme |  定义表格结构：表头，单元格内容 | `Object` | `{}` |
+| data | 表格数据 | `T[]` | `undefined` |
+| fixHeader | 表头固定，给定需要固定高度的具体数值，当超出改值时，展示滚动条 | `boolean` | `number` | `string` | `false` |
+| stickHeader | 表头吸顶，给定需要吸顶的高度，当表头在页面滚动滚动时，距离视窗顶部的距离等于该高度时，将表头固定在此高度处 | `boolean` | `number` | `string` | `false` |
+| stickScrollbar | 当出现横向滚动条时，设置是否当表格底部没有滚动到视窗中时，将横向滚动条固定在页面底部；取值为`number`类型时，用来指定距离视窗底部的距离 | `boolean` | `number` | `string` | `false` |
 | checkType | 当行可选择时，定义选择的类型: 单选 `"radio"` , 复选 `"checkbox"`, 不可选`"none"` | `"checkbox"` | `"radio"` | `"none"` | `"checkbox"` |
-| fixHeader | 表头固定，给定需要固定高度的具体数值，当超出改值时，展示滚动条 | `Boolean` | `Number` | `String` | `false` |
-| stickHeader | 表头吸顶，给定需要吸顶的高度，表格滚动超出该高度时，将表头固定在顶部 | `Boolean` | `Number` | `String` | `false` |
-| stickScrollbar | 当出现横向滚动条时，设置是否当表格底部没有滚动到视窗中时，将横向滚动条固定在页面底部；取值为`Number`类型时，用来指定距离视窗底部的距离 | `Boolean` | `Number` | `String` | `false` |
-| rowKey | 设置行的key | `Function` | function(value, index) {  return `index`; } |
-| checkedKeys | 通过`key`数组来指定哪些行被选中 | `Array` | `[]` |
-| resizable | 是否可以表头拖动 | `Boolean` | `false` |
-| rowCheckable | 当行可选时，是否点击该行任意区域都可选中 | `Boolean` | `true` |
-| rowClassName | 通过一个函数定义行的`className`，该函数会传入该行数据和索引当做参数，返回的字符串将被设为该行`className` | `Function` | `function(value, index) {  }` |
-| disableRow | 定义行禁用可选的逻辑，返回`true`，则改行被禁用选择 | `Function` | `function(data, index) { return false }` |
-| rowExpandable | 是否点击改行任意区域即展开 | `Boolean` | `true` |
-| expandedKeys | 通过`key`来指定哪些行展开 | `Array` | `[]` |
+| checkedKeys | 通过`key`数组来指定哪些行被选中 | `TableRowKey[]` | `[]` |
+| rowKey | 设置每行的key | `(value: T, index: number) => TableRowKey` | `(value: T, index: number) => index` |
+| rowCheckable | 当行可选时，是否点击该行任意区域都可选中 | `boolean` | `true` |
+| disableRow | 定义行禁用可选的逻辑，返回`true`，则改行被禁用选择 | `(value: T, index: number, key: TableRowKey) => boolean` | `undefined` |
 | type | 表格类型，默认左右无边框，`"border"`类型会添加边框, `"grid"`类型会展示栅格边框 | `"default"` | `"border"` | `"grid"` | `"default"` |
-| sort | 排序，详见示例说明 | `Object` | `{}` |
-| group | 分组，详见示例说明 | `Object` | `{}` |
-| minColWidth | 指定所有列拖动时的最小宽度 | `Number` | `40` |
-| loading | 是否展示加载状态 | `Boolean` | `false` |
-| container | 指定`group`弹出菜单追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Function` | `String` | `undefined` |
-| stripe | 相邻行是否展示不同的背景色 | `Boolean` | `false` |
-| rowSelectable | 是否点击行时高亮改行，取值为`multiple`时，可以同时高亮多行 | `Boolean` | `"single"` | `"multiple"` | `false` |
-| selectedKeys | 当`rowSelectable`取值为非`false`时，指定哪些行高亮 | `Array` | `[]` |
-| defaultWidth | 指定表格初始化宽度，可以指定百分比，像素值必须带上单位`px` | `String` | `undefined` |
-| defaultWidthMap | 指定表格初始化每列列宽，该值为`Object`，`key`对应为每列的`key`，`value`为每列列宽像素值，不带单位`px`，不能指定百分比。它的优先级高于`TableColumn`中的`width`定义 | `Object` | `{}` |
-| widthStoreKey | 如果要保存表格拖动后的列宽信息，可以通过该属性设置保存到`localStorage`中的`key` | `String` | `undefined` |
-| merge | 指定表格单元格合并逻辑 | `Function` | `undefined` |
-| tooltipPosition | 行提示的位置 | `"left"` | `"bottom"` | `"right"` | `"top"` | `Object` | `"top"` |
-| tooltipContainer | 指定弹出提示内容追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Function` | `String` | `undefined` |
-| childrenKey | 树形表格指定子元素键名 | `String` | `"children"` |
-| indent | 树形表格指定子元素缩进宽度 | `Number` | `32` |
-| spreadKeys | 树形表格指定展开的行 | `Array` | `[]` |
-| draggable | 表格行是否可拖动 | `Boolean` | `false` |
-| keepStatus | 是否在行销毁的时候，保持该行在`checkedKeys` | `selectedKeys` | `spreadKeys` | `expandedKeys`中的`key`值，默认会同步删除（仅在销毁行的时候有效，如果整个`Table`被销毁，则不会执行该逻辑） | `Boolean` | `false` |
+| stripe | 相邻行是否展示不同的背景色 | `boolean` | `false` |
+| rowClassName | 通过一个函数定义行的`className`，该函数会传入该行数据，索引和`key`当做参数，返回的字符串将被设为该行的`className` | <code>(value: T, index: number, key: TableRowKey) => string &#124; undefined</code> | `undefined` |
+| group | 分组，详见示例说明 | `TableGroupValue` | `undefined` |
+| sort | 排序，详见示例说明 | `TableSortValue` | `undefined` |
+| loading | 是否展示加载状态 | `boolean` | `false` |
+| merge | 指定表格单元格合并逻辑 | `TableMerge` | `undefined` |
+| expandedKeys | 通过`key`来指定哪些行展开 | `TableRowKey[]` | `undefined` |
+| rowExpandable | 是否点击改行任意区域即展开 | `boolean` | `true` |
+| selectedKeys | 当`rowSelectable`取值为非`false`时，指定哪些行高亮 | `TableRowKey[]` | `undefined` |
+| rowSelectable | 是否点击行时高亮改行，取值为`multiple`时，可以同时高亮多行 | `boolean` &#124; `"single"` &#124; `"multiple"` | `false` |
+| childrenKey | 树形表格指定子元素键名 | `string` | `"children"` |
+| indent | 树形表格指定子元素缩进宽度 | `number` | `32` |
+| spreadKeys | 树形表格指定展开的行 | `TableRowKey[]` | `undefined` |
+| tooltipPosition | 行提示的位置 | `"left"` &#124; `"bottom"` &#124; `"right"` &#124; `"top"` &#124; `Position` | `"top"` |
+| tooltipContainer | 指定行提示弹层追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Container` | `undefined` |
+| keepStatus | 是否在行销毁的时候，保持该行在`checkedKeys` &#124; `selectedKeys` &#124; `spreadKeys` &#124; `expandedKeys`中的`key`值，默认会同步删除（仅在销毁行的时候有效，如果整个`Table`被销毁，则不会执行该逻辑） | `boolean` | `false` |
+| showIndeterminate | 表头的`Checkbox`是否支持展示半选中状态 | `boolean` | `false` |
+| resizable | 是否可以表头拖动 | `boolean` | `false` |
+| minColWidth | 指定所有列拖动时的最小宽度 | `number` | `40` |
+| widthStoreKey | 如果要保存表格拖动后的列宽信息，可以通过该属性设置保存到`localStorage`中的`key` | `string` | `undefined` |
+| draggable | 表格行是否可拖动 | `boolean` | `false` |
+
+```ts
+import {Props} from 'intact';
+
+export type TableRowKey = string | number;
+export type TableGroupValue<T extends string | number | symbol = string | number | symbol> = Record<T, any | any[]> 
+export type TableSortValue<T = string> = {
+    key?: T 
+    type?: 'desc' | 'asc'
+}
+export type TableMerge<T = any, CheckType = 'checkbox'> = (
+    row: T,
+    column: CheckType extends 'none' ? Props<TableColumnProps> : Props<TableColumnProps> | null,
+    rowIndex: number,
+    columnIndex: number
+) => TableMergeConfig | undefined
+
+export type TableMergeConfig = {
+    colspan?: number
+    rowspan?: number
+}
+
+type Position = {
+    my?: string | [string, string]
+    at?: string | [string, string]
+    collision?: Collision | [Collision, Collision] 
+}
+
+type Collision = 'left' | 'top' | 'none'
+
+export type Container = string | ((parentDom: Element, anchor: Node | null) => Element)
+```
 
 ## TableColumn
 
-除了通过`Table`的`scheme`属性指定表格的结构外，还以通过`TableColumn`来指定，它的属性值跟`scheme`
-数据结构一一对应
-
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| title | 标题 | `String` | `""` |
-| template | 指定当前列，单元格渲染模板函数 | `Function` | `(data, index) => {}`,
-| key | 指定当前列的`key`，__必须指定，并且为了保证顺序正确，不要以数字开头__ | `String` | `""` |
-| sortable | 是否可排序 | `Boolean` | `false` |
-| width | 列宽，可以指定百分比或像素(像素不需要加单位) | `String` | `undefined` |
-| group | 指定分组数组，每一项格式为`{value: '选中后的值', label: '展示的文案'}` | `Array<Object>` | `undefined` |
-| multiple | 分组是否支持多选 | `Boolean` | `false` |
-| minWidth | 指定当前列拖动时的最小宽度，优先级高于`Table`的`minColWidth` | `Number` | `40` |
+| key | 指定当前列的`key`，__必须指定__ | `string` | `undefined` |
+| title | 标题 | `string` &#124; `VNode` | `undefined` |
+| sortable | 是否可排序 | `boolean` | `false` |
+| width | 列宽，可以指定百分比或像素(像素不需要加单位) | `string` | `undefined` |
+| group | 指定分组数组，每一项格式为`{value: '选中后的值', label: '展示的文案'}` | `TableColumnGroupItem[]` | `undefined` |
+| multiple | 分组是否支持多选 | `boolean` | `false` |
+| ignore | 是否忽略当前列的导出 | `boolean` | `false` |
 | fixed | 是否将列固定，`"left"`固定在左侧；`"right"`固定在右侧 | `"left"` &#124; `"right"` | `undefined` |
-| className | 给当前列添加className | `String` &#124; `Object` | `undefined` |
-| ignore | 是否忽略当前列的导出 | `Boolean` | `false` |
 | align | 当前列对齐方式 | `"left"` &#124; `"center"` &#124; `"right"` | `undefined` |
-| exportTitle | 自定义导出的标题 | `String` | `undefined` |
+| exportTitle | 自定义导出的标题 | `string` | `undefined` |
 | exportCell | 自定义导出的单元格内容 | `(data: any, index: number) => string` | `undefined` |
+| minWidth | 指定当前列拖动时的最小宽度，优先级高于`Table`的`minColWidth` | `number` | `undefined` |
+| className | 给当前列添加className | `string` &#124; `Record<string, any>` | `undefined` |
+
+```ts
+import {VNode} from 'intact';
+
+export type TableColumnGroupItem = {
+    label: string | VNode
+    value: any
+}
+```
 
 # 扩展点
 
@@ -75,16 +109,16 @@ sidebar: doc
 | 名称 | 说明 | 参数 |
 | --- | --- | --- |
 | empty | 自定义无数据展示模板 | - |
-| expand | 指定行展开后要展示的模板内容 | `data, index` |
-| tooltip | 行提示内容 | `data, index` |
+| expand | 指定行展开后要展示的模板内容 | `([data: T, index: number]) => Children` |
+| tooltip | 行提示内容 | `([data: T, index: number]) => Children` |
 
 ## TableColumn
 
 | 名称 | 说明 | 参数 |
 | --- | --- | --- |
 | title | 自定义复杂表头内容 | - |
-| template | 自定义单元格内容 | `data, index` |
-| default | 与`template`扩展点等价，为了方便vue中使用的别名 | `data， index` |
+| template | 自定义单元格内容 | `([data: T, index: number]) => Children` |
+| default | 与`template`扩展点等价，为了方便vue中使用的别名 | `([data: T，index: number]) => Children` |
 
 
 # 方法
@@ -93,19 +127,13 @@ sidebar: doc
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| getCheckedData | 获取选中数据信息 | - | `Array` |
-| getSelectedData | 获取高亮行数据信息 | - | `Array` |
+| getCheckedData | 获取选中数据信息 | - | `T[]` |
+| getSelectedData | 获取高亮行数据信息 | - | `T[]` |
 | checkAll | 全部选中 | - | `undefined` |
 | uncheckAll | 全不选中 | - | `undefined` |
-| isCheckAll | 判断是否全选 | - | `Boolean` |
-| isChecked | 判断某行是否选中 | `key` | `Boolean` |
-| checkRow | 选中某行 | `key` | `undefined` |
-| uncheckRow | 取消选中某行 | `key` | `undefined` |
-| expandRow | 展开某行 | `key` | `undefined` |
-| shrinkRow | 收起某行 | `key` | `undefined` |
-| scrollToRowByIndex | 通过索引指定滚动的行 | `index` | `undefined` |
-| scrollToRowByKey | 通过key指定滚动的行 | `key` | `undefined` |
-| refreshHeader | 如果固定了表头，`Table`会在是否展示滚动条的时候自动设置表头的`padding`值，某些特殊情况下如果没有正确`padding`值，可以调用该方法强制更新 | - | `undefined` |
+| scrollToRowByIndex | 通过索引指定滚动的行 | `(index: number) => Promise<void>` | `undefined` |
+| scrollToRowByKey | 通过key指定滚动的行 | `(key: TableRowKey) => Promise<void>` | `undefined` |
+| exportTable | 导出表格 | `(data: T[] = this.get('data'), filename = 'table') => Promise<string>` | `Promise<string>`返回导出的内容 |
 
 # 事件
 
@@ -113,8 +141,6 @@ sidebar: doc
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| $change:checked | 选中的数据变化会触发的事件 | `instance, newValue, oldValue` |
-| changeWidth | 当列宽拖动发生变化后触发 | `widthMap, tableWidth` |
-| click:row | 点击某行触发 | `data, index, key, event` |
-| dragstart | 行拖动开始 | `{key, from}` |
-| dragend | 行拖动结束 | `{key, from, to}` |
+| clickRow | 点击某行触发 | `(data: T, index: number, key: TableRowKey) => void` |
+| dragstart | 行拖动开始 | `(data: {key: TableRowKey, from: number}) => void` |
+| dragend | 行拖动结束 | `(data: {key: TableRowKey, from: number, to: number}) => void` |

package/components/table/index.spec.ts

@@ -22,7 +22,10 @@ import {Icon} from '../icon';
 import {useChecked, AllCheckedStatus} from './useChecked';
 
 describe('Table', () => {
-    afterEach(() => unmount());
+    afterEach(() => {
+        unmount();
+        localStorage.removeItem('resizableTable');
+    });
 
     it('check & uncheck', async () => {
         const [instance, element] = mount(BasicDemo);

package/components/table/index.ts

@@ -1,2 +1,3 @@
 export * from './table';
 export * from './column';
+export type {TableMerge, TableMergeConfig} from './useMerge';

package/components/table/row.vdt

@@ -1,3 +1,4 @@
+import {TransitionGroup} from 'intact';
 import {getClassAndStyleForFixed} from './useFixedColumns';
 import {Checkbox} from '../checkbox';
 import {Radio} from '../radio';
@@ -88,9 +89,12 @@ cols.forEach((props, columnIndex) => {
     );
 });
 
+const rows = <TransitionGroup name="k-fade-expand" move={false}>{vNodes}</TransitionGroup>
+/* const rows = vNodes; */
+
 // for performance, no normalize
 <template>
-    {createElementVNode(2, 'tr', vNodes, 8 /* HasKeyedChildren */, cx(classNameObj), {
+    {createElementVNode(2, 'tr', rows, 2, cx(classNameObj), {
         'data-key': key,
         'ev-mouseenter': this.onMouseEnter,
         'ev-mouseleave': this.onMouseLeave,

package/components/table/styles.ts

@@ -4,6 +4,8 @@ import {deepDefaults, palette} from '../../styles/utils';
 import '../../styles/global';
 
 const defaults = {
+    get transition() { return theme.transition.large },
+    // transition: '15000s',
     border: `1px solid #e5e5e5`,
     fontSize: `12px`,
     bgColor: `#fff`,
@@ -61,7 +63,7 @@ const defaults = {
     draggingOpacity: `.4`,
 };
 
-let table: any;
+let table: typeof defaults;
 setDefault(() => {
     table = deepDefaults(theme, {table: defaults}).table;
 });
@@ -82,6 +84,11 @@ export function makeStyles() {
             // border-collapse: collapse;
             border-spacing: 0;
             table-layout: fixed;
+            
+            td, 
+            th{
+                transition: all ${table.transition};  
+            }
         }
 
         // thead
@@ -131,7 +138,8 @@ export function makeStyles() {
                     background: ${table.tbody.hoverBgcolor};
                 }
                 &:last-of-type td {
-                    border-bottom: none;
+                    // border-bottom: none;
+                    border-bottom-color: transparent;
                 }
             }
         }
@@ -152,7 +160,7 @@ export function makeStyles() {
             &:after {
                 content: '';
                 display: block;
-                transition: box-shadow ${theme.transition};
+                transition: box-shadow ${table.transition};
                 position: absolute;
                 top: 0;
                 bottom: 0px;
@@ -192,6 +200,9 @@ export function makeStyles() {
             .k-affix-wrapper {
                 overflow: hidden;
             }
+            &.k-fixed {
+                position: relative;
+            }
         }
 
         // type
@@ -233,7 +244,7 @@ export function makeStyles() {
                 // position: absolute;
                 // top: -1px;
                 // left: 2px;
-                transition: transform ${theme.transition};
+                transition: transform ${table.transition};
             }
             &.k-dropdown-open .k-icon {
                 transform: rotate(180deg);
@@ -293,6 +304,7 @@ export function makeStyles() {
         }
         .k-table-expand {
             border-top: ${table.border};
+            box-sizing: content-box;
         }
 
         // select
@@ -306,7 +318,7 @@ export function makeStyles() {
         // }
         .k-table-arrow {
             margin-right: ${table.arrow.gap};
-            transition: transform ${theme.transition};
+            transition: transform ${table.transition};
             position: relative;
             top: -1px;
         }

package/components/table/table.ts

@@ -58,6 +58,7 @@ export interface TableProps<
     resizable?: boolean
     minColWidth?: number
     widthStoreKey?: string
+    draggable?: boolean
 }
 
 export interface TableEvents<T = any, K extends TableRowKey = number> {
@@ -114,6 +115,7 @@ const typeDefs: Required<TypeDefs<TableProps<unknown>>> = {
     resizable: Boolean,
     minColWidth: Number,
     widthStoreKey: String,
+    draggable: Boolean,
 };
 
 const defaults = (): Partial<TableProps> => ({

package/components/table/table.vdt

@@ -26,7 +26,7 @@ const {
     draggable,
 } = this.get();
 const {columns, cols, maxRows, maxCols} = this.columns.getData();
-const {setScrollPosition, scrollPosition, hasFixed, getHasFixedLeft, getOffsetMap} = this.fixedColumns;
+const {scrollPosition, hasFixed, getHasFixedLeft, getOffsetMap} = this.fixedColumns;
 const {scrollRef} = this.scroll;
 const {stickHeader, excludeStickHeader, elementRef, headRef} = this.stickyHeader;
 const classNameObj = {
@@ -71,20 +71,23 @@ const thead = (
                     <FixedColumnsContext.Provider value={offsetMap}>
                         <thead>
                             <tr v-for={columns}>
-                                <th v-if={$key === 0 && checkType !== 'none'}
-                                    {...getClassAndStyleForFixed({
-                                        fixed: hasFixedLeft ? 'left' : false,
-                                    }, 0)} 
-                                    rowspan={maxRows}
-                                >
-                                    <Checkbox v-if={checkType === 'checkbox'}
-                                        value={allCheckedStatus === AllCheckedStatus.All}
-                                        indeterminate={showIndeterminate && allCheckedStatus == AllCheckedStatus.Indeterminate}
-                                        ev-$change:value={toggleCheckedAll}
-                                        disabled={!hasData}
-                                    />
-                                </th>
-                                {$value}
+                                <TransitionGroup name="k-fade-expand" move={false}>
+                                    <th v-if={$key === 0 && checkType !== 'none'}
+                                        {...getClassAndStyleForFixed({
+                                            fixed: hasFixedLeft ? 'left' : false,
+                                        }, 0)}
+                                        rowspan={maxRows}
+                                        key="$checktype"
+                                    >
+                                        <Checkbox v-if={checkType === 'checkbox'}
+                                            value={allCheckedStatus === AllCheckedStatus.All}
+                                            indeterminate={showIndeterminate && allCheckedStatus == AllCheckedStatus.Indeterminate}
+                                            ev-$change:value={toggleCheckedAll}
+                                            disabled={!hasData}
+                                        />
+                                    </th>
+                                    {$value}
+                                </TransitionGroup>
                             </tr>
                         </thead>
                     </FixedColumnsContext.Provider>
@@ -104,91 +107,93 @@ const {isSelected} = this.selected;
 const {loopData, isSpreaded, toggleSpreadRow} = this.tree;
 const {onRowDragStart, onRowDragOver, onRowDragEnd, draggingKey} = this.draggable;
 const tbody = (
-    <TransitionGroup tag="tbody" name="k-fade" move={!draggingKey.value}>
+    <tbody>
         {!hasData ? 
             <tr key="table-empty">
                 <td colspan={colCount} class="k-table-empty">
                     <b:empty>{_$('/(ㄒoㄒ)/~~ 没有找到亲要的数据哦~')}</b:empty>
                 </td>
             </tr> :
-            (() => {
-                const rows = [];
-                loopData((value, index, level, hidden) => {
-                    // don't render if row is hidden
-                    if (hidden) return hidden;
+            <TransitionGroup name="k-fade-in-left" move={!draggingKey.value}>
+                {(() => {
+                    const rows = [];
+                    loopData((value, index, level, hidden) => {
+                        // don't render if row is hidden
+                        if (hidden) return hidden;
 
-                    const status = allStatus[index];
-                    const key = allKeys[index];
-                    const spreaded = isSpreaded(key);
-                    const hasChildren = !!childrenKey && Array.isArray(value[childrenKey]);
-                    const indentSize = indent ? indent * level : 0; 
+                        const status = allStatus[index];
+                        const key = allKeys[index];
+                        const spreaded = isSpreaded(key);
+                        const hasChildren = !!childrenKey && Array.isArray(value[childrenKey]);
+                        const indentSize = indent ? indent * level : 0; 
 
-                    let row = <TableRow
-                        key={key}
-                        cols={cols}
-                        data={value}
-                        checkType={checkType}
-                        hasFixedLeft={hasFixedLeft}
-                        onClick={this.clickRow}
-                        checked={status.checked}
-                        indeterminate={status.indeterminate}
-                        index={index}
-                        disabled={status.disabled}
-                        allDisabled={status.allDisabled}
-                        className={rowClassName && rowClassName(value, index, key)}
-                        merge={merge}
-                        grid={getGrid()}
-                        onChangeChecked={onChangeChecked}
-                        selected={isSelected(key)}
-                        spreaded={spreaded}
-                        hasChildren={hasChildren}
-                        indent={indentSize}
-                        onToggleSpreadRow={toggleSpreadRow}
-                        onBeforeUnmount={this.resetRowStatus.onRowBeforeUnmount}
-                        offsetMap={offsetMap}
+                        let row = <TableRow
+                            key={key}
+                            cols={cols}
+                            data={value}
+                            checkType={checkType}
+                            hasFixedLeft={hasFixedLeft}
+                            onClick={this.clickRow}
+                            checked={status.checked}
+                            indeterminate={status.indeterminate}
+                            index={index}
+                            disabled={status.disabled}
+                            allDisabled={status.allDisabled}
+                            className={rowClassName && rowClassName(value, index, key)}
+                            merge={merge}
+                            grid={getGrid()}
+                            onChangeChecked={onChangeChecked}
+                            selected={isSelected(key)}
+                            spreaded={spreaded}
+                            hasChildren={hasChildren}
+                            indent={indentSize}
+                            onToggleSpreadRow={toggleSpreadRow}
+                            onBeforeUnmount={this.resetRowStatus.onRowBeforeUnmount}
+                            offsetMap={offsetMap}
 
-                        draggable={draggable}
-                        draggingKey={draggingKey.value}
-                        onRowDragStart={onRowDragStart}
-                        onRowDragEnd={onRowDragEnd}
-                        onRowDragOver={onRowDragOver}
-                    />
+                            draggable={draggable}
+                            draggingKey={draggingKey.value}
+                            onRowDragStart={onRowDragStart}
+                            onRowDragEnd={onRowDragEnd}
+                            onRowDragOver={onRowDragOver}
+                        />
 
-                    if ($blocks.tooltip) {
-                        const content = <b:tooltip params={[value, index]} />;
-                        row = (
-                            <Tooltip key={key} position={tooltipPosition} container={tooltipContainer}>
-                                <template>{row}</template>
-                                <b:content>{content}</b:content>
-                            </Tooltip>
-                        );
-                    }
+                        if ($blocks.tooltip) {
+                            const content = <b:tooltip params={[value, index]} />;
+                            row = (
+                                <Tooltip key={key} position={tooltipPosition} container={tooltipContainer}>
+                                    <template>{row}</template>
+                                    <b:content>{content}</b:content>
+                                </Tooltip>
+                            );
+                        }
 
-                    rows.push(row);
-                    if ($blocks.expand) {
-                        const expanded = isExpanded(key);
-                        rows.push(
-                            <tr class={{"k-expand": true, 'k-expanded': expanded}}
-                                key={`${key}.$expand`}
-                            >
-                                <td colspan={colCount}>
-                                    <Transition {...expandAnimationCallbacks}>
-                                        <div v-if={expanded} class="k-table-expand">
-                                            <b:expand params={[value, index]} />
-                                        </div>
-                                    </Transition>
-                                </td>
-                            </tr>
-                        );
-                    }
+                        rows.push(row);
+                        if ($blocks.expand) {
+                            const expanded = isExpanded(key);
+                            rows.push(
+                                <tr class={{"k-expand": true, 'k-expanded': expanded}}
+                                    key={`${key}.$expand`}
+                                >
+                                    <td colspan={colCount}>
+                                        <Transition {...expandAnimationCallbacks}>
+                                            <div v-if={expanded} class="k-table-expand">
+                                                <b:expand params={[value, index]} />
+                                            </div>
+                                        </Transition>
+                                    </td>
+                                </tr>
+                            );
+                        }
 
-                    return hidden || !spreaded;
-                });
+                        return hidden || !spreaded;
+                    });
 
-                return rows;
-            })()
+                    return rows;
+                })()}
+            </TransitionGroup>
         }
-    </TransitionGroup>
+    </tbody>
 );
 
 const tableWidthPx = tableWidth.value ? `${tableWidth.value}px` : null;