fix(comp:table): the indent not work and selected records not cached (#…

…1484) fix #1482
IDuxFE · Mar 6, 2023 · a3d5bb7 · a3d5bb7
1 parent e044390
commit a3d5bb7
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 31 deletions.
diff --git a/packages/components/table/__tests__/__snapshots__/table.spec.ts.snap b/packages/components/table/__tests__/__snapshots__/table.spec.ts.snap
@@ -63,9 +63,9 @@ exports[`Table > basic work > render work 1`] = `
             </td>
           </tr>
           <tr class=\\"ix-table-row\\">
-            <td class=\\"ix-table-cell\\">
-              <!----><a>expandable</a>
-            </td>
+            <td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\">
+                <!---->
+              </button><a>expandable</a></td>
             <td class=\\"ix-table-cell\\">
               <!----><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
                 <!---->
@@ -92,9 +92,9 @@ exports[`Table > basic work > render work 1`] = `
             </td>
           </tr>
           <tr class=\\"ix-table-row\\">
-            <td class=\\"ix-table-cell\\">
-              <!----><a>expandable</a>
-            </td>
+            <td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\">
+                <!---->
+              </button><a>expandable</a></td>
             <td class=\\"ix-table-cell\\">
               <!----><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
                 <!---->
@@ -148,9 +148,9 @@ exports[`Table > basic work > render work 1`] = `
             </td>
           </tr>
           <tr class=\\"ix-table-row\\">
-            <td class=\\"ix-table-cell\\">
-              <!----><a>expandable</a>
-            </td>
+            <td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\">
+                <!---->
+              </button><a>expandable</a></td>
             <td class=\\"ix-table-cell\\">
               <!----><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
                 <!---->
@@ -177,9 +177,9 @@ exports[`Table > basic work > render work 1`] = `
             </td>
           </tr>
           <tr class=\\"ix-table-row\\">
-            <td class=\\"ix-table-cell\\">
-              <!----><a>expandable</a>
-            </td>
+            <td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\">
+                <!---->
+              </button><a>expandable</a></td>
             <td class=\\"ix-table-cell\\">
               <!----><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
                 <!---->
@@ -233,9 +233,9 @@ exports[`Table > basic work > render work 1`] = `
             </td>
           </tr>
           <tr class=\\"ix-table-row\\">
-            <td class=\\"ix-table-cell\\">
-              <!----><a>expandable</a>
-            </td>
+            <td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\">
+                <!---->
+              </button><a>expandable</a></td>
             <td class=\\"ix-table-cell\\">
               <!----><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
                 <!---->
@@ -262,9 +262,9 @@ exports[`Table > basic work > render work 1`] = `
             </td>
           </tr>
           <tr class=\\"ix-table-row\\">
-            <td class=\\"ix-table-cell\\">
-              <!----><a>expandable</a>
-            </td>
+            <td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\">
+                <!---->
+              </button><a>expandable</a></td>
             <td class=\\"ix-table-cell\\">
               <!----><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
                 <!---->

diff --git a/packages/components/table/demo/Server.vue b/packages/components/table/demo/Server.vue
@@ -55,6 +55,13 @@ interface RandomUser {
 }
 
 const columns: TableColumn<RandomUser>[] = [
+  {
+    type: 'selectable',
+    align: 'center',
+    multiple: true,
+    showIndex: false,
+    onChange: console.log,
+  },
   {
     key: 'Name',
     title: 'Name',

diff --git a/packages/components/table/demo/TreeTable.vue b/packages/components/table/demo/TreeTable.vue
@@ -34,7 +34,7 @@ const columns: TableColumn<Data>[] = [
   {
     type: 'expandable',
     width: 160,
-    indent: 10,
+    indent: 16,
     title: 'Event Name',
     dataKey: 'eventName',
     customCell: 'name',

diff --git a/packages/components/table/docs/Api.zh.md b/packages/components/table/docs/Api.zh.md
@@ -85,7 +85,7 @@ export type TableColumn<T = any, V = any> =
 | `type` | 列类型 | `'expandable'` | - | - | 必填 |
 | `disabled` |  设置是否允许行展开 | `(record:T) => boolean` | - | - | - |
 | `icon` | 展开按钮图标 | `string \| VNode \| ((data: { expanded: boolean; record: T }) => string \| VNodeChild)` | `'right'` | ✅ | - |
-| `indent` | 展示树形数据时，每层缩进的宽度 | `number` | `12` | - | - |
+| `indent` | 展示树形数据时，每层缩进的宽度 | `number` | - | - | - |
 | `trigger` | 不通过图标，触发行展开的方式 | `'click' \| 'doubleClick'` | - | - | - |
 | `onChange` | 展开状态发生变化时触发 | `(expendedRowKeys: (string \| number)[], expendedRecords: T[]) => void` | - | - | - |
 | `onExpand` | 点击展开图标，或通过 `trigger` 触发 | `(expanded: boolean, record: T) => void` | - | - | - |

diff --git a/packages/components/table/src/composables/useSelectable.ts b/packages/components/table/src/composables/useSelectable.ts
@@ -90,15 +90,28 @@ export function useSelectable(
 
   // 当前页是否部分被选中
   const currentPageSomeSelected = computed(() => !currentPageAllSelected.value && countCurrentPageSelected.value > 0)
+  // 缓存已经被选中的数据，考虑到后端分页的清空，dataMap 中没有全部的数据
+  const cacheSelectedMap = new Map<VKey, MergedData>()
 
   const emitChange = (tempRowKeys: VKey[]) => {
     setSelectedRowKeys(tempRowKeys)
     const dataMap = mergedMap.value
     const { onChange } = selectable.value || {}
     if (onChange) {
       const selectedRecords: unknown[] = []
+      // 清理掉缓存中被取消选中的数据
+      cacheSelectedMap.forEach((_, key) => {
+        if (!tempRowKeys.includes(key)) {
+          cacheSelectedMap.delete(key)
+        }
+      })
       tempRowKeys.forEach(key => {
-        const currData = dataMap.get(key)
+        let currData = dataMap.get(key)
+        if (currData) {
+          cacheSelectedMap.set(key, currData)
+        } else {
+          currData = cacheSelectedMap.get(key)
+        }
         currData && selectedRecords.push(currData.record)
       })
       callEmit(onChange, tempRowKeys, selectedRecords)

diff --git a/packages/components/table/src/main/body/BodyCell.tsx b/packages/components/table/src/main/body/BodyCell.tsx
@@ -178,21 +178,21 @@ function renderExpandableChildren(
   expandable: ComputedRef<TableColumnMergedExpandable | undefined>,
   prefixCls: string,
 ) {
-  if (props.disabled) {
-    return undefined
-  }
-
   const { icon, customIcon, indent } = expandable.value!
   const { record, expanded, level = 0 } = props
   const style = indent ? `margin-left: ${convertCssPixel(level * indent)}` : undefined
 
-  let iconNode: VNodeChild | null
-  const iconRender = (isString(customIcon) ? slots[customIcon] : customIcon) ?? icon
-  if (isFunction(iconRender)) {
-    iconNode = iconRender({ expanded: !!expanded, record })
-  } else {
-    iconNode = isString(iconRender) ? <IxIcon name={iconRender} rotate={expanded ? 90 : 0} /> : iconRender
+  let iconNode: VNodeChild
+
+  if (!props.disabled) {
+    const iconRender = (isString(customIcon) ? slots[customIcon] : customIcon) ?? icon
+    if (isFunction(iconRender)) {
+      iconNode = iconRender({ expanded: !!expanded, record })
+    } else {
+      iconNode = isString(iconRender) ? <IxIcon name={iconRender} rotate={expanded ? 90 : 0} /> : iconRender
+    }
   }
+
   return (
     <button class={`${prefixCls}-expandable-trigger`} style={style} type="button" onClick={props.handleExpend}>
       {iconNode}