diff --git a/packages/components/table/__tests__/table.spec.ts b/packages/components/table/__tests__/table.spec.ts index 36325d771..c6f765498 100644 --- 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 index 9d27736d5..3f27e6842 100644 --- 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 index 6054cc5fd..435ca33c3 100644 --- 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 index 6a86c2f1d..51c4bb9f7 100644 --- 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 index 4a09ec2b7..1c07a58fe 100644 --- 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(() => { 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 index f9b229419..668c73f06 100644 --- 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>, default: undefined }, customTag: { type: Object as PropType, default: undefined }, dataSource: { type: Array as PropType, default: () => [] }, - ellipsis: { type: Boolean, default: false }, + ellipsis: { type: [Boolean, Object] as PropType, default: false }, empty: { type: [String, Object] as PropType, default: undefined }, getKey: { type: [String, Function] as PropType any)>, default: undefined }, header: { type: [String, Object] as PropType, default: undefined }, @@ -107,7 +107,7 @@ export interface TableColumnCommon { export interface TableColumnBase extends TableColumnCommon { dataKey?: VKey | VKey[] - ellipsis?: boolean + ellipsis?: boolean | { title?: boolean } sortable?: TableColumnSortable filterable?: TableColumnFilterable title?: string diff --git a/packages/components/table/src/utils/index.ts b/packages/components/table/src/utils/index.ts index 036097edb..cf2950596 100644 --- 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 index 80fa9d93c..e4d0a64a8 100644 --- 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, default: undefined }, dataSource: { type: Array as PropType, default: () => [] }, editable: { type: Boolean, default: false }, - ellipsis: { type: Boolean, default: false }, + ellipsis: { type: [Boolean, Object] as PropType, default: false }, empty: { type: [String, Object] as PropType, default: undefined }, getKey: { type: [String, Function] as PropType any)>, default: undefined }, header: { type: [String, Object] as PropType, default: undefined }, diff --git a/vitest.config.ts b/vitest.config.ts index 59ec722ef..e2589b7aa 100644 --- 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: [],