fix(comp:table): incorrect serial number (#1370)

packages/components/config/src/defaultConfig.ts

@@ -315,6 +315,10 @@ export const defaultConfig: GlobalConfig = {
     columnSelectable: {
       showIndex: false,
     },
+    columnIndexable: {
+      align: 'center',
+      customCell: ({ rowIndex, pageSize, pageIndex }) => (pageIndex - 1) * pageSize + rowIndex + 1,
+    },
   },
   tag: {},
   tagGroup: {

packages/components/config/src/types.ts

@@ -34,6 +34,7 @@ import type { SpinSize, SpinTipAlignType } from '@idux/components/spin'
 import type { StepperLabelPlacement, StepperSize } from '@idux/components/stepper'
 import type {
   TableColumnAlign,
+  TableColumnIndexable,
   TableColumnSortOrder,
   TableEmptyCellOptions,
   TablePaginationPosition,
@@ -465,6 +466,7 @@ export interface TableConfig {
   columnBase: TableColumnBaseConfig
   columnExpandable: TableColumnExpandableConfig
   columnSelectable: TableColumnSelectableConfig
+  columnIndexable: Omit<TableColumnIndexable, 'type'>
 }
 
 export interface TableColumnBaseConfig {

packages/components/table/demo/EditRows.vue

@@ -214,9 +214,11 @@ const onSaveAll = () => {
 }
 
 const onCancelAll = () => {
-  data.value = data.value.map(item => {
-    item.editable = false
-    return item
-  })
+  data.value = data.value
+    .filter(item => isString(item.key) && !item.key.startsWith(addKeyPrefix))
+    .map(item => {
+      item.editable = false
+      return item
+    })
 }
 </script>

packages/components/table/demo/Indexable.md

@@ -0,0 +1,14 @@
+---
+title:
+  zh: 带序号的表格
+  en: Table with index
+order: 48
+---
+
+## zh
+
+配置 `type: 'indexable'` 即可使用序号列。
+
+## en
+
+You can configure `type: 'indexable'` to use an index column.

packages/components/table/demo/Indexable.vue

@@ -0,0 +1,73 @@
+<template>
+  <IxTable :columns="columns" :dataSource="data">
+    <template #name="{ value }">
+      <IxButton mode="link">{{ value }}</IxButton>
+    </template>
+    <template #action="{ record }">
+      <IxButtonGroup :gap="8" mode="link" separator="|">
+        <IxButton>Invite {{ record.name }}</IxButton>
+        <IxButton>Delete</IxButton>
+      </IxButtonGroup>
+    </template>
+  </IxTable>
+</template>
+
+<script lang="ts" setup>
+import { h } from 'vue'
+
+import { TableColumn } from '@idux/components/table'
+import { IxTag } from '@idux/components/tag'
+
+interface Data {
+  key: number
+  name: string
+  age: number
+  address: string
+  tags: string[]
+}
+
+const columns: TableColumn<Data>[] = [
+  { type: 'indexable' },
+  {
+    title: 'Name',
+    dataKey: 'name',
+    customCell: 'name',
+  },
+  {
+    title: 'Age',
+    dataKey: 'age',
+  },
+  {
+    title: 'Address',
+    dataKey: 'address',
+  },
+  {
+    title: 'Tags',
+    dataKey: 'tags',
+    customCell: ({ value }) =>
+      value.map((tag: string) => {
+        let color = tag.length > 5 ? 'warning' : 'success'
+        if (tag === 'loser') {
+          color = 'error'
+        }
+        return h(IxTag, { color }, { default: () => tag.toUpperCase() })
+      }),
+  },
+  {
+    title: 'Action',
+    key: 'action',
+    customCell: 'action',
+  },
+]
+
+const data: Data[] = []
+for (let index = 0; index < 100; index++) {
+  data.push({
+    key: index,
+    name: `Edrward ${index}`,
+    age: 18 + index,
+    address: `London Park no. ${index}`,
+    tags: ['nice', 'developer'],
+  })
+}
+</script>

packages/components/table/docs/Api.zh.md

@@ -48,7 +48,9 @@ export type TableColumn<T = any, V = any> =
   | TableColumnSelectable<T>
 ```
 
-#### 通用配置。
+#### TableColumnCommon
+
+所有列的通用配置。
 
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
@@ -59,7 +61,7 @@ export type TableColumn<T = any, V = any> =
 | `titleColSpan` | 设置表头的 `colSpan` | - | - | - | 为 `0` 时，不渲染 |
 | `width` | 列宽度 | `string \| number` | - | - | - |
 
-##### TableColumnBase
+#### TableColumnBase
 
 普通列配置的属性。
 
@@ -74,7 +76,7 @@ export type TableColumn<T = any, V = any> =
 | `customCell` | 自定义单元格内容 | `string \| ((data: { value: V; record: T; rowIndex: number }) => VNodeChild)` | - | - | 类型为 `string` 时，对应插槽名 |
 | `customTitle` | 自定义表头标题 | `string \| ((data: { title?: string }) => VNodeChild)` | - | - | 类型为 `string` 时，对应插槽名 |
 
-##### TableColumnExpandable
+#### TableColumnExpandable
 
 可展开列配置的属性, 继承 `TableColumnBase`。
 
@@ -90,7 +92,7 @@ export type TableColumn<T = any, V = any> =
 | `customExpand` | 自定义展开内容 | `string \| ((data: { record: T; rowIndex: number }) => VNodeChild)` | - | - | 类型为 `string` 时，对应插槽名 |
 | `customIcon` | 自定义展开图标 | `string \| ((data: { expanded: boolean; record: T }) => VNodeChild)` | - | - | 类型为 `string` 时，对应插槽名 |
 
-##### TableColumnSelectable
+#### TableColumnSelectable
 
 可选择列配置的属性。
 
@@ -111,7 +113,19 @@ export type TableColumn<T = any, V = any> =
 | `onSelectPageInvert` | 点击反选当页所有时触发 | `() => void` | - | - | 配置 `menus= ['pageInvert']` 时生效 |
 | `customCell` | 自定义单元格内容 | `string \| ((data: { checked: boolean;  disabled: boolean;  indeterminate?: boolean, onChange: () => void,  onClick: () => void }) => VNodeChild)` | - | - | 类型为 `string` 时，对应插槽名 |
 
-##### TableColumnSortable
+#### TableColumnIndexable
+
+序号列配置的属性。
+
+| 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
+| --- | --- | --- | --- | --- | --- |
+| `type` | 列类型 | `'indexable'` | - | - | 必填 |
+| `ellipsis` | 超过宽度将自动省略 | `boolean \| { title?: boolean; head?: boolean }` | - | ✅ | -  |
+| `title` | 列头的文本 | `string` | - | ✅ | - |
+| `customCell` | 自定义单元格内容 | `string \| ((data: { record: T; rowIndex: number, pageSize: number, pageIndex: number }) => VNodeChild)` | ✅ | - | 类型为 `string` 时，对应插槽名 |
+| `customTitle` | 自定义表头标题 | `string \| ((data: { title?: string }) => VNodeChild)` | - | ✅ | 类型为 `string` 时，对应插槽名 |
+
+#### TableColumnSortable
 
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
@@ -122,7 +136,7 @@ export type TableColumn<T = any, V = any> =
 | `sorter` | 本地模式下，排序的运行函数 | `(curr: T, next: T) => number` | - | - | 参考 [`Array.sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) |
 | `onChange` | 排序规则改变后的回调 | `(currOrderBy?: TableColumnSortOrder) => void` | - | - | 通常用于受控模式或服务端排序 |
 
-##### TableColumnFilterable
+#### TableColumnFilterable
 
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |

packages/components/table/index.ts

@@ -25,6 +25,7 @@ export type {
   TableColumnBase,
   TableColumnExpandable,
   TableColumnSelectable,
+  TableColumnIndexable,
   TableCustomAdditional,
   TableCustomTag,
   TablePagination,

packages/components/table/src/composables/useColumns.ts

@@ -21,12 +21,7 @@ import {
 import { debounce, isNil } from 'lodash-es'
 
 import { type VKey, flattenNode } from '@idux/cdk/utils'
-import {
-  type TableColumnBaseConfig,
-  type TableColumnExpandableConfig,
-  TableColumnSelectableConfig,
-  type TableConfig,
-} from '@idux/components/config'
+import { type TableConfig } from '@idux/components/config'
 
 import { tableColumnKey } from '../column'
 import {
@@ -48,12 +43,7 @@ export function useColumns(
 ): ColumnsContext {
   const mergedColumns = computed(() => {
     const { columns } = props
-    return mergeColumns(
-      columns && columns.length > 0 ? columns : convertColumns(slots.default?.()),
-      config.columnBase,
-      config.columnExpandable,
-      config.columnSelectable,
-    )
+    return mergeColumns(columns && columns.length > 0 ? columns : convertColumns(slots.default?.()), config)
   })
   const { flattedColumns, scrollBarColumn, flattedColumnsWithScrollBar } = useFlattedColumns(
     mergedColumns,
@@ -108,7 +98,7 @@ export interface ColumnsContext {
 }
 
 export type TableColumnMerged = (TableColumnMergedBase | TableColumnMergedExpandable | TableColumnMergedSelectable) & {
-  type?: 'selectable' | 'expandable' | 'scroll-bar'
+  type?: 'selectable' | 'expandable' | 'scroll-bar' | 'indexable'
 }
 export type TableColumnMergedExtra =
   | TableColumnMergedBaseExtra
@@ -151,13 +141,8 @@ export interface TableColumnScrollBar {
 
 export type TableColumnMergedScrollBar = TableColumnMergedBaseExtra & TableColumnScrollBar
 
-function mergeColumns(
-  columns: TableColumn[],
-  baseConfig: TableColumnBaseConfig,
-  expandableConfig: TableColumnExpandableConfig,
-  selectableConfig: TableColumnSelectableConfig,
-): TableColumnMerged[] {
-  return columns.map(column => convertColumn(column, baseConfig, expandableConfig, selectableConfig))
+function mergeColumns(columns: TableColumn[], config: TableConfig): TableColumnMerged[] {
+  return columns.map(column => convertColumn(column, config))
 }
 
 export function convertColumns(nodes: VNode[] | undefined): TableColumn[] {
@@ -192,26 +177,26 @@ export function convertColumns(nodes: VNode[] | undefined): TableColumn[] {
   return columns
 }
 
-function convertColumn(
-  column: TableColumn,
-  baseConfig: TableColumnBaseConfig,
-  expandableConfig: TableColumnExpandableConfig,
-  selectableConfig: TableColumnSelectableConfig,
-): TableColumnMerged {
-  const { align = baseConfig.align } = column
+function convertColumn(column: TableColumn, config: TableConfig): TableColumnMerged {
+  const { columnBase, columnExpandable, columnSelectable, columnIndexable } = config
+  const { align = columnBase.align } = column
   const key = getColumnKey(column)
 
   if ('type' in column) {
     const { type } = column
     if (type === 'expandable') {
-      const { icon = expandableConfig.icon } = column
+      const { icon = columnExpandable.icon } = column
       return { ...column, key, align, icon }
     }
     if (type === 'selectable') {
       // The default value for `multiple` is true
-      const { multiple = true, showIndex = selectableConfig.showIndex } = column
+      const { multiple = true, showIndex = columnSelectable.showIndex } = column
       return { ...column, key, align, multiple, showIndex } as TableColumnMerged
     }
+    if (type === 'indexable') {
+      const align = column.align ?? columnIndexable.align ?? columnBase.align
+      return { ...columnIndexable, ...column, align, key } as TableColumnMerged
+    }
     // for ProTable to support more type
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
@@ -220,13 +205,13 @@ function convertColumn(
     const { sortable, filterable, children } = column
     const newColumn = { ...column, key, align }
     if (sortable) {
-      newColumn.sortable = { ...baseConfig.sortable, ...sortable }
+      newColumn.sortable = { ...columnBase.sortable, ...sortable }
     }
     if (filterable) {
-      newColumn.filterable = { ...baseConfig.filterable, ...filterable }
+      newColumn.filterable = { ...columnBase.filterable, ...filterable }
     }
     if (children?.length) {
-      newColumn.children = mergeColumns(children, baseConfig, expandableConfig, selectableConfig)
+      newColumn.children = mergeColumns(children, config)
     }
     return newColumn
   }