feat(comp:table): column align supports cell and title (#1784)

IDuxFE · Jan 8, 2024 · 7a69ea1 · 7a69ea1
1 parent 5d9ddc4
commit 7a69ea1
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 14 deletions.
diff --git a/packages/components/table/demo/Basic.vue b/packages/components/table/demo/Basic.vue
@@ -38,6 +38,10 @@ const columns: TableColumn<Data>[] = [
   {
     title: 'Age',
     dataKey: 'age',
+    align: {
+      title: 'start',
+      cell: 'end',
+    },
   },
   {
     title: 'Address',

diff --git a/packages/components/table/docs/Api.zh.md b/packages/components/table/docs/Api.zh.md
@@ -60,7 +60,7 @@ export type TableColumn<T = any, V = any> =
 
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
-| `align` | 文本对齐方式 | `'start' \| 'center' \| 'end'` | `'start'` | ✅ | - |
+| `align` | 文本对齐方式 | `'start' \| 'center' \| 'end' \| { title: 'start' \| 'center' \| 'end', cell: 'start' \| 'center' \| 'end' }` | `'start'` | ✅ | - |
 | `colSpan` | 计算列的 `colSpan` | `(record: T, rowIndex: number) => number` | - | - | 返回为 `0` 时，不渲染, 通常用于列合并 |
 | `fixed` | 是否固定 | `'start' \| 'end'` | - | - | - |
 | `rowSpan` | 计算列的 `rowSpan` | `(record: T, rowIndex: number) => number` | - | - | 返回为 `0` 时，不渲染, 通常用于行合并 |

diff --git a/packages/components/table/src/composables/useColumns.ts b/packages/components/table/src/composables/useColumns.ts
@@ -17,7 +17,7 @@ import {
   watchEffect,
 } from 'vue'
 
-import { debounce, isNil } from 'lodash-es'
+import { debounce, isNil, isString } from 'lodash-es'
 
 import { type VKey, flattenNode } from '@idux/cdk/utils'
 import { type TableConfig } from '@idux/components/config'
@@ -121,7 +121,7 @@ export type TableColumnMergedExtra =
   | TableColumnMergedScrollBar
 
 export interface TableColumnMergedBase extends TableColumnBase {
-  align: TableColumnAlign
+  align: { title: TableColumnAlign; cell: TableColumnAlign }
   key: VKey
 }
 export interface TableColumnMergedBaseExtra extends TableColumnMergedBase {
@@ -132,13 +132,13 @@ export interface TableColumnMergedBaseExtra extends TableColumnMergedBase {
   titleRowSpan?: number
 }
 export interface TableColumnMergedExpandable extends TableColumnMergedBaseExtra, TableColumnExpandable {
-  align: TableColumnAlign
+  align: { title: TableColumnAlign; cell: TableColumnAlign }
   key: VKey
   icon: string | VNodeChild | ((options: { expanded: boolean; record: unknown }) => string | VNodeChild)
   titleColSpan: number
 }
 export interface TableColumnMergedSelectable extends TableColumnMergedBaseExtra, TableColumnSelectable {
-  align: TableColumnAlign
+  align: { title: TableColumnAlign; cell: TableColumnAlign }
   key: VKey
   multiple: boolean
   titleColSpan: number
@@ -191,6 +191,17 @@ export function convertColumns(nodes: VNode[] | undefined): TableColumn[] {
   return columns
 }
 
+function resolveColumnAlign(align: TableColumnAlign | { title: TableColumnAlign; cell: TableColumnAlign }): {
+  title: TableColumnAlign
+  cell: TableColumnAlign
+} {
+  if (isString(align)) {
+    return { title: align, cell: align }
+  }
+
+  return align
+}
+
 function convertColumn(column: TableColumn, config: TableConfig): TableColumnMerged {
   const { columnBase, columnExpandable, columnSelectable, columnIndexable } = config
   const { align = columnBase.align } = column
@@ -200,24 +211,24 @@ function convertColumn(column: TableColumn, config: TableConfig): TableColumnMer
     const { type } = column
     if (type === 'expandable') {
       const { showLine = columnExpandable.showLine, icon = columnExpandable.icon } = column
-      return { ...column, key, align, icon, showLine }
+      return { ...column, key, align: resolveColumnAlign(align), icon, showLine }
     }
     if (type === 'selectable') {
       // The default value for `multiple` is true
       const { multiple = true, showIndex = columnSelectable.showIndex } = column
-      return { ...column, key, align, multiple, showIndex } as TableColumnMerged
+      return { ...column, key, align: resolveColumnAlign(align), multiple, showIndex } as TableColumnMerged
     }
     if (type === 'indexable') {
       const align = column.align ?? columnIndexable.align ?? columnBase.align
-      return { ...columnIndexable, ...column, align, key } as TableColumnMerged
+      return { ...columnIndexable, ...column, align: resolveColumnAlign(align), key } as TableColumnMerged
     }
     // for ProTable to support more type
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    return { ...column, key, align }
+    return { ...column, key, align: resolveColumnAlign(align) }
   } else {
     const { sortable, filterable, children } = column
-    const newColumn = { ...column, key, align }
+    const newColumn = { ...column, key, align: resolveColumnAlign(align) }
     if (sortable) {
       newColumn.sortable = { ...columnBase.sortable, ...sortable }
     }

diff --git a/packages/components/table/src/main/body/BodyCell.tsx b/packages/components/table/src/main/body/BodyCell.tsx
@@ -70,7 +70,7 @@ export default defineComponent({
       let classes = {
         [`${prefixCls}-cell`]: true,
         [`${prefixCls}-cell-sorted`]: !!activeSortOrderBy.value,
-        [`${prefixCls}-cell-align-${align}`]: !!align && align != 'start',
+        [`${prefixCls}-cell-align-${align.cell}`]: !!align && align.cell != 'start',
         [`${prefixCls}-cell-ellipsis`]: !!mergedEllipsis.value,
       }
       if (fixed) {

diff --git a/packages/components/table/src/main/head/HeadCell.tsx b/packages/components/table/src/main/head/HeadCell.tsx
@@ -70,8 +70,8 @@ export default defineComponent({
         [`${prefixCls}-cell-${type}`]: !!type,
         [`${prefixCls}-cell-filterable`]: !!filterable,
         [`${prefixCls}-cell-sortable`]: !!sortable,
-        [`${prefixCls}-cell-align-center`]: hasChildren || align === 'center',
-        [`${prefixCls}-cell-align-end`]: !hasChildren && align === 'end',
+        [`${prefixCls}-cell-align-center`]: hasChildren || align?.title === 'center',
+        [`${prefixCls}-cell-align-end`]: !hasChildren && align?.title === 'end',
         [`${prefixCls}-cell-ellipsis`]: !!mergedEllipsis.value,
       }
       if (fixed) {

diff --git a/packages/components/table/src/types.ts b/packages/components/table/src/types.ts
@@ -87,7 +87,7 @@ export type TableColumn<T = any, K = VKey> =
 
 export interface TableColumnCommon<T = any> {
   key?: VKey
-  align?: TableColumnAlign
+  align?: TableColumnAlign | { title: TableColumnAlign; cell: TableColumnAlign }
   colSpan?: (record: T, rowIndex: number) => number
   rowSpan?: (record: T, rowIndex: number) => number
   fixed?: TableColumnFixed