fix(comp:table): the fixed column not work with ellipsis (#1081)

IDuxFE · Aug 22, 2022 · 423d4cb · 423d4cb
1 parent faf0737
commit 423d4cb
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/packages/cdk/forms/__tests__/formControl.spec.ts b/packages/cdk/forms/__tests__/formControl.spec.ts
@@ -86,6 +86,8 @@ describe('formControl.ts', () => {
 
       control = new FormControl('test', { validators: Validators.required, asyncValidators: _asyncValidator })
 
+      await flushPromises()
+
       expect(control.hasError('required')).toEqual(false)
       expect(control.hasError('async')).toEqual(false)
 

diff --git a/packages/components/table/src/main/body/BodyCell.tsx b/packages/components/table/src/main/body/BodyCell.tsx
@@ -44,22 +44,24 @@ export default defineComponent({
     const activeSortOrderBy = computed(() => activeOrderByMap[props.column.key])
     const dataValue = useDataValue(props)
 
+    const isFixStartLast = computed(() => fixedColumnKeys.value.lastStartKey === props.column.key)
+    const isFixEndFirst = computed(() => fixedColumnKeys.value.firstEndKey === props.column.key)
+
     const classes = computed(() => {
-      const { key, fixed, align, ellipsis = tableProps.ellipsis } = props.column as BodyColumn
+      const { fixed, align, ellipsis = tableProps.ellipsis } = props.column as BodyColumn
       const prefixCls = mergedPrefixCls.value
       let classes = {
         [`${prefixCls}-sorted`]: !!activeSortOrderBy.value,
         [`${prefixCls}-align-${align}`]: !!align,
         [`${prefixCls}-ellipsis`]: !!ellipsis,
       }
       if (fixed) {
-        const { lastStartKey, firstEndKey } = fixedColumnKeys.value
         classes = {
           ...classes,
           [`${prefixCls}-fix-start`]: fixed === 'start',
-          [`${prefixCls}-fix-start-last`]: lastStartKey === key,
+          [`${prefixCls}-fix-start-last`]: isFixStartLast.value,
           [`${prefixCls}-fix-end`]: fixed === 'end',
-          [`${prefixCls}-fix-end-first`]: firstEndKey === key,
+          [`${prefixCls}-fix-end-first`]: isFixEndFirst.value,
           [`${prefixCls}-fix-sticky`]: isSticky.value,
         }
       }
@@ -102,6 +104,12 @@ export default defineComponent({
         title = getColTitle(ellipsis, children, text)
       }
 
+      // see: https://github.com/IDuxFE/idux/issues/1081
+      const { fixed, ellipsis = tableProps.ellipsis } = props.column as BodyColumn
+      if (fixed && ellipsis && (isFixStartLast.value || isFixEndFirst.value)) {
+        children = <span class={`${mergedPrefixCls.value}-cell-content`}>{children}</span>
+      }
+
       const customAdditionalFn = tableProps.customAdditional?.bodyCell
       const customAdditional = customAdditionalFn
         ? customAdditionalFn({ column, record: props.record, rowIndex: props.rowIndex })

diff --git a/packages/components/table/style/index.less b/packages/components/table/style/index.less
@@ -127,6 +127,11 @@
     .@{table-prefix}-cell-title {
       .ellipsis();
     }
+
+    .@{table-prefix}-cell-content {
+      display: block;
+      .ellipsis();
+    }
   }
 
   &-cell-title {