feat(comp:table): ellipsis supports hidden the title (#1044)

fix #1035
IDuxFE · Jul 27, 2022 · 70a6d4a · 70a6d4a
1 parent 29adb34
commit 70a6d4a
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 13 deletions.
diff --git a/packages/components/table/__tests__/table.spec.ts b/packages/components/table/__tests__/table.spec.ts
@@ -190,6 +190,22 @@ describe('Table', () => {
       expect(wrapper.find('tbody').find('td').classes()).not.toContain('ix-table-ellipsis')
     })
 
+    test('ellipsis with title work', async () => {
+      const wrapper = TableMount({ props: { ellipsis: { title: false } } })
+
+      expect(wrapper.find('thead').findAll('th')[2].classes()).toContain('ix-table-ellipsis')
+      expect(wrapper.find('tbody').findAll('td')[2].classes()).toContain('ix-table-ellipsis')
+      expect(wrapper.find('thead').findAll('th')[2].attributes('title')).toBe(undefined)
+      expect(wrapper.find('tbody').findAll('td')[2].attributes('title')).toBe(undefined)
+
+      await wrapper.setProps({ ellipsis: { title: true } })
+
+      expect(wrapper.find('thead').findAll('th')[2].classes()).toContain('ix-table-ellipsis')
+      expect(wrapper.find('tbody').findAll('td')[2].classes()).toContain('ix-table-ellipsis')
+      expect(wrapper.find('thead').findAll('th')[2].attributes('title')).not.toBe(undefined)
+      expect(wrapper.find('tbody').findAll('td')[2].attributes('title')).not.toBe(undefined)
+    })
+
     test('ellipsis with columns work', async () => {
       const wrapper = TableMount({
         props: {

diff --git a/packages/components/table/docs/Index.zh.md b/packages/components/table/docs/Index.zh.md
@@ -22,7 +22,7 @@ order: 0
 | `columns` | 表格列的配置描述 | `TableColumn[]` | - | - |  参见[TableColumn](#TableColumn)  |
 | `customAdditional` | 自定义表格行和单元格的额外属性 | `TableCustomAdditional` | - | - | 参见[TableCustomAdditional](#TableCustomAdditional) |
 | `dataSource` | 表格数据数组 | `object[]` | - | - | - |
-| `ellipsis` | 超过宽度将自动省略 | `boolean` | `false` | - | - |
+| `ellipsis` | 超过宽度将自动省略 | `boolean \| { title: boolean }` | `false` | - | `title` 为 `false` 时, 不显示原生的 `title` |
 | `empty` | 空数据时的内容 | `string \| EmptyProps \| #empty` | - | - | - |
 | `getKey` | 获取数据的唯一标识 | `string \| (record: any) => VKey` | `key` | ✅ | - |
 | `headless` | 是否隐藏表头 | `boolean` | `false` | - |- |

diff --git a/packages/components/table/src/composables/useColumns.ts b/packages/components/table/src/composables/useColumns.ts
@@ -46,7 +46,7 @@ export function useColumns(
   )
   const fixedColumnKeys = useFixedColumnKeys(flattedColumnsWithScrollBar)
   const hasEllipsis = computed(
-    () => props.ellipsis || flattedColumns.value.some(column => (column as TableColumnBase).ellipsis),
+    () => !!props.ellipsis || flattedColumns.value.some(column => (column as TableColumnBase).ellipsis),
   )
   const hasFixed = computed(() => flattedColumns.value.some(column => column.fixed))
 

diff --git a/packages/components/table/src/main/body/BodyCell.tsx b/packages/components/table/src/main/body/BodyCell.tsx
@@ -50,7 +50,7 @@ export default defineComponent({
       let classes = {
         [`${prefixCls}-sorted`]: !!activeSortOrderBy.value,
         [`${prefixCls}-align-${align}`]: !!align,
-        [`${prefixCls}-ellipsis`]: ellipsis,
+        [`${prefixCls}-ellipsis`]: !!ellipsis,
       }
       if (fixed) {
         const { lastStartKey, firstEndKey } = fixedColumnKeys.value

diff --git a/packages/components/table/src/main/head/HeadCell.tsx b/packages/components/table/src/main/head/HeadCell.tsx
@@ -5,7 +5,16 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { type ComputedRef, type Slots, type VNodeChild, computed, defineComponent, inject, normalizeClass } from 'vue'
+import {
+  type CSSProperties,
+  type ComputedRef,
+  type Slots,
+  type VNodeChild,
+  computed,
+  defineComponent,
+  inject,
+  normalizeClass,
+} from 'vue'
 
 import { isFunction, isString } from 'lodash-es'
 
@@ -63,7 +72,7 @@ export default defineComponent({
         [`${prefixCls}-cell-sortable`]: !!sortable,
         [`${prefixCls}-align-${align}`]: !hasChildren && !!align,
         [`${prefixCls}-align-center`]: hasChildren,
-        [`${prefixCls}-ellipsis`]: ellipsis,
+        [`${prefixCls}-ellipsis`]: !!ellipsis,
       }
       if (fixed) {
         const { lastStartKey, firstEndKey } = fixedColumnKeys.value
@@ -79,7 +88,7 @@ export default defineComponent({
       return normalizeClass(classes)
     })
 
-    const style = computed(() => {
+    const style = computed<CSSProperties | undefined>(() => {
       const { fixed, colStart, colEnd } = props.column as HeadColumn
       if (!fixed) {
         return

diff --git a/packages/components/table/src/types.ts b/packages/components/table/src/types.ts
@@ -32,7 +32,7 @@ export const tableProps = {
   customAdditional: { type: Object as PropType<TableCustomAdditional<any, any>>, default: undefined },
   customTag: { type: Object as PropType<TableCustomTag>, default: undefined },
   dataSource: { type: Array as PropType<any[]>, default: () => [] },
-  ellipsis: { type: Boolean, default: false },
+  ellipsis: { type: [Boolean, Object] as PropType<boolean | { title?: boolean }>, default: false },
   empty: { type: [String, Object] as PropType<string | EmptyProps>, default: undefined },
   getKey: { type: [String, Function] as PropType<string | ((record: any) => any)>, default: undefined },
   header: { type: [String, Object] as PropType<string | HeaderProps>, default: undefined },
@@ -107,7 +107,7 @@ export interface TableColumnCommon<T = any> {
 
 export interface TableColumnBase<T = any, K = VKey> extends TableColumnCommon<T> {
   dataKey?: VKey | VKey[]
-  ellipsis?: boolean
+  ellipsis?: boolean | { title?: boolean }
   sortable?: TableColumnSortable<T>
   filterable?: TableColumnFilterable<T>
   title?: string

diff --git a/packages/components/table/src/utils/index.ts b/packages/components/table/src/utils/index.ts
@@ -9,14 +9,18 @@
 
 import { type VNode, type VNodeChild } from 'vue'
 
-import { isString } from 'lodash-es'
+import { isObject, isString } from 'lodash-es'
 
 import { Logger, type VKey, convertArray, getFirstValidNode, uniqueId } from '@idux/cdk/utils'
 
 import { type TableColumn } from '../types'
 
-export function getColTitle(ellipsis: boolean, children: VNodeChild, title: string | undefined): string | undefined {
-  if (!ellipsis) {
+export function getColTitle(
+  ellipsis: boolean | { title?: boolean },
+  children: VNodeChild,
+  title: string | undefined,
+): string | undefined {
+  if (!ellipsis || (isObject(ellipsis) && !ellipsis.title)) {
     return undefined
   }
 

diff --git a/packages/pro/table/src/types.ts b/packages/pro/table/src/types.ts
@@ -51,7 +51,7 @@ export const proTableProps = {
   customTag: { type: Object as PropType<TableCustomTag>, default: undefined },
   dataSource: { type: Array as PropType<any[]>, default: () => [] },
   editable: { type: Boolean, default: false },
-  ellipsis: { type: Boolean, default: false },
+  ellipsis: { type: [Boolean, Object] as PropType<boolean | { title?: boolean }>, default: false },
   empty: { type: [String, Object] as PropType<string | EmptyProps>, default: undefined },
   getKey: { type: [String, Function] as PropType<string | ((record: any) => any)>, default: undefined },
   header: { type: [String, Object] as PropType<string | HeaderProps>, default: undefined },

diff --git a/vitest.config.ts b/vitest.config.ts
@@ -34,7 +34,7 @@ export default defineConfig({
     setupFiles: [resolve(__dirname, './tests/setup.ts')],
     coverage: {
       enabled: true,
-      reporter: ['json', 'lcov', 'text', 'cobertura'],
+      reporter: ['json', 'lcov', 'cobertura'],
       excludeNodeModules: true,
       include: ['packages/**/src/*.{ts,tsx}'],
       exclude: [],