fix(data-table): expanding related errors, closes #1644

tusen-ai · Nov 22, 2021 · 3f4a88e · 3f4a88e
1 parent ef9920c
commit 3f4a88e
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 24 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -5,6 +5,8 @@
 ### Fixes
 
 - Fix `n-image` drag the picture to move the position incorrectly when the zoom is large.
+- Fix `n-data-table` style glitches after some rows are expanded.
+- Fix `n-data-table` doesn't expand tree data correctly, closes [#1644](https://github.com/TuSimple/naive-ui/issues/1644).
 
 ## 2.21.0 (2021-11-21)
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -5,6 +5,8 @@
 ### Fixes
 
 - 修复 `n-image` 当放大很大的时候拖动图片移动位置不正确
+- 修复 `n-data-table` 在某些行展开后出现的样式问题
+- 修复 `n-data-table` 未能正确展开树形数据，关闭 [#1644](https://github.com/TuSimple/naive-ui/issues/1644)
 
 ## 2.21.0 (2021-11-21)
 

diff --git a/src/data-table/demos/enUS/expand.demo.md b/src/data-table/demos/enUS/expand.demo.md
@@ -15,7 +15,7 @@ const createColumns = ({ sendMail }) => {
     },
     {
       type: 'expand',
-      expandable: (_, index) => index !== 1,
+      expandable: (rowData) => rowData.name !== 'Jim Green',
       renderExpand: (rowData) => {
         return `${rowData.name} is a good guy.`
       }

diff --git a/src/data-table/demos/enUS/index.demo-entry.md b/src/data-table/demos/enUS/index.demo-entry.md
@@ -95,7 +95,7 @@ striped
 | defaultSortOrder | `'descend' \| 'ascend' \| false` | `false` | The default sort order of the table in uncontrolled manner. |
 | disabled | `(rowData: object, rowIndex: number) => boolean` | `() => false` | Whether the row is checkable. |
 | ellipsis | `boolean \| EllipsisProps` | `false` | Ellipsis options when content overflows. |
-| expandable | `(rowData: object, rowIndex: number) => boolean` | `undefined` | Whethe the row is expandable. Only works when `type` is `'expand'`. |
+| expandable | `(rowData: object) => boolean` | `undefined` | Whethe the row is expandable. Only works when `type` is `'expand'`. |
 | filter | `boolean \| (optionValue: string \| number, rowData: object) => boolean \| 'default'` | `false` | The filter of the column. If set to `true`, it will only display filter button on the column, which can be used in async status. |
 | filterMode | `'and' \| 'or'` | `'or'` | The filter mode. |
 | filterMultiple | `boolean` | `true` | Can the column filtered by multiple values. |

diff --git a/src/data-table/demos/zhCN/expand.demo.md b/src/data-table/demos/zhCN/expand.demo.md
@@ -15,7 +15,7 @@ const createColumns = ({ sendMail }) => {
     },
     {
       type: 'expand',
-      expandable: (_, index) => index !== 1,
+      expandable: (rowData) => rowData.name !== 'Jim Green',
       renderExpand: (rowData) => {
         return `${rowData.name} is a good guy.`
       }

diff --git a/src/data-table/demos/zhCN/index.demo-entry.md b/src/data-table/demos/zhCN/index.demo-entry.md
@@ -97,7 +97,7 @@ striped
 | defaultSortOrder | `'descend' \| 'ascend' \| false` | `false` | 非受控状态下表格默认的排序方式 |
 | disabled | `(rowData: object, rowIndex: number) => boolean` | `undefined` | 是否禁用 |
 | ellipsis | `boolean \| EllipsisProps` | `false` | 文本溢出的设置 |
-| expandable | `(rowData: object, rowIndex: number) => boolean` | `undefined` | 行是否可展开，仅在 `type` 为 `'expand'` 时生效 |
+| expandable | `(rowData: object) => boolean` | `undefined` | 行是否可展开，仅在 `type` 为 `'expand'` 时生效 |
 | filter | `boolean \| (optionValue: string \| number, rowData: object) => boolean \| 'default'` | `undefined` | 这一列的过滤方法。如果设为 `true`，表格将只会在这列展示一个排序图标，在异步的时候可能有用。 |
 | filterMode | `'and' \| 'or'` | `'or'` | 同一列筛选方式为与还是或 |
 | filterMultiple | `boolean` | `true` | 同一列是否可以筛选多个 |

diff --git a/src/data-table/src/TableParts/Body.tsx b/src/data-table/src/TableParts/Body.tsx
@@ -78,7 +78,7 @@ function flatten (
   rowInfos.forEach((rowInfo) => {
     fRows.push(rowInfo)
     const { children } = rowInfo.tmNode
-    if (children) {
+    if (children && expandedRowKeys.has(rowInfo.key)) {
       traverse(children)
     }
   })
@@ -435,10 +435,6 @@ export default defineComponent({
               handleUpdateExpanded
             } = this
             const { length: colCount } = cols
-            const rowIndexToKey: Record<number, RowKey> = {}
-            paginatedData.forEach(({ tmNode }, rowIndex) => {
-              rowIndexToKey[rowIndex] = tmNode.key
-            })
 
             let mergedData: RowRenderInfo[]
 
@@ -483,7 +479,26 @@ export default defineComponent({
               ? { width: pxfy(this.indent) }
               : undefined
 
-            const { length: rowCount } = mergedData
+            // Tile the data of the expanded row
+            const displayedData: RowRenderInfo[] = []
+            mergedData.forEach((rowInfo) => {
+              if (renderExpand && mergedExpandedRowKeySet.has(rowInfo.key)) {
+                displayedData.push(rowInfo, {
+                  isExpandedRow: true,
+                  key: rowInfo.key,
+                  tmNode: rowInfo.tmNode as TmNode
+                })
+              } else {
+                displayedData.push(rowInfo)
+              }
+            })
+
+            const { length: rowCount } = displayedData
+
+            const rowIndexToKey: Record<number, RowKey> = {}
+            paginatedData.forEach(({ tmNode }, rowIndex) => {
+              rowIndexToKey[rowIndex] = tmNode.key
+            })
 
             const renderRow = (
               rowInfo: RowRenderInfo,
@@ -703,20 +718,6 @@ export default defineComponent({
               return row
             }
 
-            // Tile the data of the expanded row
-            const displayedData: RowRenderInfo[] = []
-            mergedData.forEach((rowInfo) => {
-              if (renderExpand && mergedExpandedRowKeySet.has(rowInfo.key)) {
-                displayedData.push(rowInfo, {
-                  isExpandedRow: true,
-                  key: rowInfo.key,
-                  tmNode: rowInfo.tmNode as TmNode
-                })
-              } else {
-                displayedData.push(rowInfo)
-              }
-            })
-
             if (!virtualScroll) {
               return (
                 <table

diff --git a/src/data-table/src/interface.ts b/src/data-table/src/interface.ts
@@ -138,6 +138,8 @@ export type RenderExpand<T = InternalRowData> = (
   row: T,
   index: number
 ) => VNodeChild
+
+// TODO: we should deprecate `index` since it would change after row is expanded
 export type Expandable<T = InternalRowData> = (row: T, index: number) => boolean
 export interface TableExpandColumn<T = InternalRowData>
   extends Omit<TableSelectionColumn<T>, 'type'> {