From f49263fac7358fc1824bb26eeacb2e65f2d4c2d5 Mon Sep 17 00:00:00 2001
From: danranvm <danranvm@gmail.com>
Date: Thu, 15 Dec 2022 17:39:46 +0800
Subject: [PATCH] feat(comp:table): selectable supports showIndex

---
 .../components/config/src/defaultConfig.ts    |  3 +
 packages/components/config/src/types.ts       |  5 ++
 .../__snapshots__/table.spec.ts.snap          | 36 +++++-----
 packages/components/table/demo/Selectable.md  |  2 +
 packages/components/table/demo/Selectable.vue | 29 ++++----
 packages/components/table/docs/Api.zh.md      |  1 +
 .../table/src/composables/useColumns.ts       | 36 ++++++----
 .../table/src/main/body/BodyCell.tsx          | 33 +++++----
 .../table/src/main/body/BodyRow.tsx           | 70 ++++++++++++-------
 packages/components/table/src/types.ts        |  2 +
 .../__snapshots__/proTransfer.spec.ts.snap    | 20 ++++++
 11 files changed, 153 insertions(+), 84 deletions(-)

diff --git a/packages/components/config/src/defaultConfig.ts b/packages/components/config/src/defaultConfig.ts
index 17353d5da..8db65a95c 100644
--- a/packages/components/config/src/defaultConfig.ts
+++ b/packages/components/config/src/defaultConfig.ts
@@ -309,6 +309,9 @@ export const defaultConfig: GlobalConfig = {
     columnExpandable: {
       icon: 'right',
     },
+    columnSelectable: {
+      showIndex: false,
+    },
   },
   tag: {},
   tagGroup: {
diff --git a/packages/components/config/src/types.ts b/packages/components/config/src/types.ts
index 144f3fc2f..6fdbd05c3 100644
--- a/packages/components/config/src/types.ts
+++ b/packages/components/config/src/types.ts
@@ -458,6 +458,7 @@ export interface TableConfig {
 
   columnBase: TableColumnBaseConfig
   columnExpandable: TableColumnExpandableConfig
+  columnSelectable: TableColumnSelectableConfig
 }
 
 export interface TableColumnBaseConfig {
@@ -470,6 +471,10 @@ export interface TableColumnExpandableConfig {
   icon: string | VNodeChild | ((options: { expanded: boolean; record: any }) => string | VNodeChild)
 }
 
+export interface TableColumnSelectableConfig {
+  showIndex: boolean
+}
+
 export interface TagConfig {
   shape?: TagShape
 }
diff --git a/packages/components/table/__tests__/__snapshots__/table.spec.ts.snap b/packages/components/table/__tests__/__snapshots__/table.spec.ts.snap
index b6f68ca1f..641147759 100644
--- a/packages/components/table/__tests__/__snapshots__/table.spec.ts.snap
+++ b/packages/components/table/__tests__/__snapshots__/table.spec.ts.snap
@@ -63,9 +63,9 @@ exports[`Table > basic work > render work 1`] = `
             </td>
           </tr>
           <tr class=\\"ix-table-row\\">
-            <td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\">
-                <!---->
-              </button><a>expandable</a></td>
+            <td class=\\"ix-table-cell\\">
+              <!----><a>expandable</a>
+            </td>
             <td class=\\"ix-table-cell\\">
               <!----><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
                 <!---->
@@ -92,9 +92,9 @@ exports[`Table > basic work > render work 1`] = `
             </td>
           </tr>
           <tr class=\\"ix-table-row\\">
-            <td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\">
-                <!---->
-              </button><a>expandable</a></td>
+            <td class=\\"ix-table-cell\\">
+              <!----><a>expandable</a>
+            </td>
             <td class=\\"ix-table-cell\\">
               <!----><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
                 <!---->
@@ -148,9 +148,9 @@ exports[`Table > basic work > render work 1`] = `
             </td>
           </tr>
           <tr class=\\"ix-table-row\\">
-            <td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\">
-                <!---->
-              </button><a>expandable</a></td>
+            <td class=\\"ix-table-cell\\">
+              <!----><a>expandable</a>
+            </td>
             <td class=\\"ix-table-cell\\">
               <!----><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
                 <!---->
@@ -177,9 +177,9 @@ exports[`Table > basic work > render work 1`] = `
             </td>
           </tr>
           <tr class=\\"ix-table-row\\">
-            <td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\">
-                <!---->
-              </button><a>expandable</a></td>
+            <td class=\\"ix-table-cell\\">
+              <!----><a>expandable</a>
+            </td>
             <td class=\\"ix-table-cell\\">
               <!----><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
                 <!---->
@@ -233,9 +233,9 @@ exports[`Table > basic work > render work 1`] = `
             </td>
           </tr>
           <tr class=\\"ix-table-row\\">
-            <td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\">
-                <!---->
-              </button><a>expandable</a></td>
+            <td class=\\"ix-table-cell\\">
+              <!----><a>expandable</a>
+            </td>
             <td class=\\"ix-table-cell\\">
               <!----><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
                 <!---->
@@ -262,9 +262,9 @@ exports[`Table > basic work > render work 1`] = `
             </td>
           </tr>
           <tr class=\\"ix-table-row\\">
-            <td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\">
-                <!---->
-              </button><a>expandable</a></td>
+            <td class=\\"ix-table-cell\\">
+              <!----><a>expandable</a>
+            </td>
             <td class=\\"ix-table-cell\\">
               <!----><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
                 <!---->
diff --git a/packages/components/table/demo/Selectable.md b/packages/components/table/demo/Selectable.md
index 6271bda8a..202ffc871 100644
--- a/packages/components/table/demo/Selectable.md
+++ b/packages/components/table/demo/Selectable.md
@@ -11,6 +11,7 @@ order: 30
 
 - 支持多选和单选
 - 支持通过行的点击或者双击事件来进行选中
+- 支持默认显示序号, 悬浮时显示勾选框
 - 通常情况下，你不需要用到 `reactive`, 除非你需要切换某个配置
 
 ## en
@@ -19,4 +20,5 @@ Configure `TableColumnSelectable` in `columns` to support row selection.
 
 - Multiple or single options are supported
 - Supports row `click` or `dblclick` events to select
+- Support default display serial number, and display checkbox in hover
 - Normally you don't need to use Reactive unless you need to switch a configuration
diff --git a/packages/components/table/demo/Selectable.vue b/packages/components/table/demo/Selectable.vue
index 814f8f1c6..39dc4cb4b 100644
--- a/packages/components/table/demo/Selectable.vue
+++ b/packages/components/table/demo/Selectable.vue
@@ -1,18 +1,19 @@
 <template>
-  <IxSpace>
-    <IxSwitch v-model:checked="selectableColumn.multiple" :labels="['Checkbox', 'Radio']"></IxSwitch>
-    <IxRadioGroup v-model:value="selectableColumn.trigger">
-      <IxRadio value="click">Click</IxRadio>
-      <IxRadio value="dblclick">DblClick</IxRadio>
-    </IxRadioGroup>
+  <IxSpace vertical block>
+    <IxSpace align="center">
+      <IxRadioGroup v-model:value="selectableColumn.trigger">
+        <IxRadio value="click">Click</IxRadio>
+        <IxRadio value="dblclick">DblClick</IxRadio>
+      </IxRadioGroup>
+      <IxSwitch v-model:checked="selectableColumn.multiple" :labels="['Multiple', 'Multiple']"></IxSwitch>
+      <IxSwitch v-model:checked="selectableColumn.showIndex" :labels="['Index', 'Index']"></IxSwitch>
+    </IxSpace>
+    <IxTable v-model:selectedRowKeys="selectedRowKeys" :columns="columns" :dataSource="data" :pagination="false">
+      <template #name="{ value }">
+        <IxButton mode="link">{{ value }}</IxButton>
+      </template>
+    </IxTable>
   </IxSpace>
-  <br />
-  <br />
-  <IxTable v-model:selectedRowKeys="selectedRowKeys" :columns="columns" :dataSource="data" :pagination="false">
-    <template #name="{ value }">
-      <IxButton mode="link">{{ value }}</IxButton>
-    </template>
-  </IxTable>
 </template>
 
 <script lang="ts" setup>
@@ -33,8 +34,10 @@ const selectedRowKeys = ref([1])
 
 const selectableColumn = reactive<TableColumnSelectable<Data>>({
   type: 'selectable',
+  align: 'center',
   disabled: record => record.key === 4,
   multiple: true,
+  showIndex: false,
   onChange: (selectedKeys, selectedRows) => console.log(selectedKeys, selectedRows),
 })
 
diff --git a/packages/components/table/docs/Api.zh.md b/packages/components/table/docs/Api.zh.md
index 909529e58..916abfced 100644
--- a/packages/components/table/docs/Api.zh.md
+++ b/packages/components/table/docs/Api.zh.md
@@ -100,6 +100,7 @@ export type TableColumn<T = any, V = any> =
 | `disabled` |  设置是否允许行选择 | `(record: T, rowIndex: number) => boolean` | - | - | - |
 | `multiple` | 是否支持多选 | `boolean` | `true` | - | - |
 | `menus` | 自定义列头下拉菜单 | `('all' \| 'invert' \| 'none' \| 'pageInvert' \| MenuData)[]` | - | - | - |
+| `showIndex` | 是否显示序号 | `boolean` | `false` | ✅ | - |
 | `trigger` | 不通过点击选择框，触发行选择的方式 | `'click' \| 'doubleClick'` | - | - | - |
 | `onChange` | 选中状态发生变化时触发 | `(selectedRowKeys: (string \| number)[], selectedRecords: T[]) => void` | - | - | - |
 | `onMenuClick` | 点击下拉菜单时触发 | `(options: MenuClickOptions, currentPageRowKeys: VKey[]) => void` | - | - | 如果点击时预设的值, 则不会触发该回调（例如：`all`, 那么触发的是 `onSelectAll`） |
diff --git a/packages/components/table/src/composables/useColumns.ts b/packages/components/table/src/composables/useColumns.ts
index 86509f2c3..8bb977934 100644
--- a/packages/components/table/src/composables/useColumns.ts
+++ b/packages/components/table/src/composables/useColumns.ts
@@ -21,7 +21,12 @@ import {
 import { debounce, isNil } from 'lodash-es'
 
 import { type VKey, flattenNode } from '@idux/cdk/utils'
-import { type TableColumnBaseConfig, type TableColumnExpandableConfig, type TableConfig } from '@idux/components/config'
+import {
+  type TableColumnBaseConfig,
+  type TableColumnExpandableConfig,
+  TableColumnSelectableConfig,
+  type TableConfig,
+} from '@idux/components/config'
 
 import { tableColumnKey } from '../column'
 import {
@@ -43,11 +48,12 @@ export function useColumns(
 ): ColumnsContext {
   const mergedColumns = computed(() => {
     const { columns } = props
-    if (columns && columns.length > 0) {
-      return mergeColumns(props.columns, config.columnBase, config.columnExpandable)
-    } else {
-      return mergeColumns(convertColumns(slots.default?.()), config.columnBase, config.columnExpandable)
-    }
+    return mergeColumns(
+      columns && columns.length > 0 ? columns : convertColumns(slots.default?.()),
+      config.columnBase,
+      config.columnExpandable,
+      config.columnSelectable,
+    )
   })
   const { flattedColumns, scrollBarColumn, flattedColumnsWithScrollBar } = useFlattedColumns(
     mergedColumns,
@@ -101,7 +107,9 @@ export interface ColumnsContext {
   mergedRows: ComputedRef<TableColumnMergedExtra[][]>
 }
 
-export type TableColumnMerged = TableColumnMergedBase | TableColumnMergedExpandable | TableColumnMergedSelectable
+export type TableColumnMerged = (TableColumnMergedBase | TableColumnMergedExpandable | TableColumnMergedSelectable) & {
+  type?: 'selectable' | 'expandable' | 'scroll-bar'
+}
 export type TableColumnMergedExtra =
   | TableColumnMergedBaseExtra
   | TableColumnMergedExpandable
@@ -122,7 +130,7 @@ export interface TableColumnMergedBaseExtra extends TableColumnMergedBase {
 export interface TableColumnMergedExpandable extends TableColumnMergedBaseExtra, TableColumnExpandable {
   align: TableColumnAlign
   key: VKey
-  icon: string | VNodeChild | ((options: { expanded?: boolean; record: unknown }) => string | VNodeChild)
+  icon: string | VNodeChild | ((options: { expanded: boolean; record: unknown }) => string | VNodeChild)
   titleColSpan: number
 }
 export interface TableColumnMergedSelectable extends TableColumnMergedBaseExtra, TableColumnSelectable {
@@ -130,6 +138,8 @@ export interface TableColumnMergedSelectable extends TableColumnMergedBaseExtra,
   key: VKey
   multiple: boolean
   titleColSpan: number
+
+  customCell?: (data: unknown) => VNodeChild
 }
 
 export interface TableColumnScrollBar {
@@ -145,8 +155,9 @@ function mergeColumns(
   columns: TableColumn[],
   baseConfig: TableColumnBaseConfig,
   expandableConfig: TableColumnExpandableConfig,
+  selectableConfig: TableColumnSelectableConfig,
 ): TableColumnMerged[] {
-  return columns.map(column => convertColumn(column, baseConfig, expandableConfig))
+  return columns.map(column => convertColumn(column, baseConfig, expandableConfig, selectableConfig))
 }
 
 export function convertColumns(nodes: VNode[] | undefined): TableColumn[] {
@@ -185,6 +196,7 @@ function convertColumn(
   column: TableColumn,
   baseConfig: TableColumnBaseConfig,
   expandableConfig: TableColumnExpandableConfig,
+  selectableConfig: TableColumnSelectableConfig,
 ): TableColumnMerged {
   const { align = baseConfig.align } = column
   const key = getColumnKey(column)
@@ -197,8 +209,8 @@ function convertColumn(
     }
     if (type === 'selectable') {
       // The default value for `multiple` is true
-      const multiple = column.multiple ?? true
-      return { ...column, key, align, multiple }
+      const { multiple = true, showIndex = selectableConfig.showIndex } = column
+      return { ...column, key, align, multiple, showIndex } as TableColumnMerged
     }
     // for ProTable to support more type
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -214,7 +226,7 @@ function convertColumn(
       newColumn.filterable = { ...baseConfig.filterable, ...filterable }
     }
     if (children?.length) {
-      newColumn.children = mergeColumns(children, baseConfig, expandableConfig)
+      newColumn.children = mergeColumns(children, baseConfig, expandableConfig, selectableConfig)
     }
     return newColumn
   }
diff --git a/packages/components/table/src/main/body/BodyCell.tsx b/packages/components/table/src/main/body/BodyCell.tsx
index 40a7b7b06..0455e79ef 100644
--- a/packages/components/table/src/main/body/BodyCell.tsx
+++ b/packages/components/table/src/main/body/BodyCell.tsx
@@ -173,26 +173,21 @@ function renderExpandableChildren(
   expandable: ComputedRef<TableColumnMergedExpandable | undefined>,
   prefixCls: string,
 ) {
-  const { icon, customIcon, indent } = expandable.value!
-  const { record, expanded, level = 0, disabled } = props
-  const style = {
-    marginLeft: indent ? convertCssPixel(level * indent) : undefined,
+  if (props.disabled) {
+    return undefined
   }
 
+  const { icon, customIcon, indent } = expandable.value!
+  const { record, expanded, level = 0 } = props
+  const style = indent ? `margin-left: ${convertCssPixel(level * indent)}` : undefined
+
   let iconNode: VNodeChild | null
-  if (disabled) {
-    iconNode = null
-  } else if (isFunction(customIcon)) {
-    iconNode = customIcon({ expanded: !!expanded, record })
-  } else if (isString(customIcon) && slots[customIcon]) {
-    iconNode = slots[customIcon]!({ expanded, record })
+  const iconRender = (isString(customIcon) ? slots[customIcon] : customIcon) ?? icon
+  if (isFunction(iconRender)) {
+    iconNode = iconRender({ expanded: !!expanded, record })
   } else {
-    iconNode = isFunction(icon) ? icon({ expanded, record }) : icon
-    if (isString(iconNode)) {
-      iconNode = <IxIcon name={iconNode} rotate={expanded ? 90 : 0} />
-    }
+    iconNode = isString(iconRender) ? <IxIcon name={iconRender} rotate={expanded ? 90 : 0} /> : iconRender
   }
-
   return (
     <button class={`${prefixCls}-expandable-trigger`} style={style} type="button" onClick={props.handleExpend}>
       {iconNode}
@@ -206,9 +201,13 @@ function renderSelectableChildren(
   selectable: ComputedRef<TableColumnMergedSelectable | undefined>,
   onClick: (evt: Event) => void,
 ) {
-  const { selected: checked, indeterminate, disabled, handleSelect: onChange } = props
-  const { multiple, customCell } = selectable.value!
+  const { selected: checked, indeterminate, disabled, isHover, rowIndex, handleSelect: onChange } = props
+  const { showIndex, multiple, customCell } = selectable.value!
   const customRender = isString(customCell) ? slots[customCell] : customCell
+  if (!customRender && !checked && !isHover && showIndex) {
+    const style = disabled ? 'cursor: not-allowed' : 'cursor: pointer'
+    return <span style={style}>{rowIndex}</span>
+  }
   if (multiple) {
     const checkboxProps = { checked, disabled, indeterminate, onChange, onClick }
     return customRender ? customRender(checkboxProps) : <IxCheckbox {...checkboxProps}></IxCheckbox>
diff --git a/packages/components/table/src/main/body/BodyRow.tsx b/packages/components/table/src/main/body/BodyRow.tsx
index 3a2877646..498e8c19d 100644
--- a/packages/components/table/src/main/body/BodyRow.tsx
+++ b/packages/components/table/src/main/body/BodyRow.tsx
@@ -5,7 +5,7 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { type ComputedRef, type VNodeTypes, computed, defineComponent, inject, normalizeClass } from 'vue'
+import { type ComputedRef, Ref, type VNodeTypes, computed, defineComponent, inject, normalizeClass, ref } from 'vue'
 
 import { type VKey } from '@idux/cdk/utils'
 
@@ -36,7 +36,7 @@ export default defineComponent({
       currentPageRowKeys,
     } = inject(TABLE_TOKEN)!
 
-    const { expandDisabled, handleExpend, selectDisabled, handleSelect, clickEvents } = useEvents(
+    const { expandDisabled, handleExpend, selectDisabled, handleSelect, isHover, attrs } = useEvents(
       props,
       expandable,
       checkExpandDisabled,
@@ -68,17 +68,19 @@ export default defineComponent({
         : undefined
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const Tag = (tableProps.customTag?.bodyRow ?? 'tr') as any
+
       return (
-        <Tag class={classes.value} {...clickEvents.value} {...customAdditional}>
+        <Tag class={classes.value} {...attrs.value} {...customAdditional}>
           {renderChildren(
             props,
             flattedColumns,
-            expandDisabled.value,
+            expandDisabled,
             handleExpend,
             isSelected,
             isIndeterminate,
             selectDisabled,
             handleSelect,
+            isHover,
           )}
         </Tag>
       )
@@ -104,48 +106,67 @@ function useEvents(
 
   const selectDisabled = computed(() => currentPageRowKeys.value.disabledRowKeys.includes(props.rowKey))
   const selectTrigger = computed(() => selectable.value?.trigger)
+  const showIndex = computed(() => selectable.value?.showIndex)
+  const isHover = ref(false)
   const handleSelect = () => {
     const { rowKey, record } = props
     handleSelectChange(rowKey, record)
   }
 
   const handleClick = () => {
-    if (expendTrigger.value === 'click' && !expandDisabled.value) {
-      handleExpend()
-    }
-    if (selectTrigger.value === 'click' && !selectDisabled.value) {
-      handleSelect()
-    }
+    expendTrigger.value === 'click' && handleExpend()
+    selectTrigger.value === 'click' && handleSelect()
   }
 
   const handleDblclick = () => {
-    if (expendTrigger.value === 'dblclick' && !expandDisabled.value) {
-      handleExpend()
-    }
-    if (selectTrigger.value === 'dblclick' && !selectDisabled.value) {
-      handleSelect()
-    }
+    expendTrigger.value === 'dblclick' && handleExpend()
+    selectTrigger.value === 'dblclick' && handleSelect()
   }
 
-  const clickEvents = computed(() => {
-    const onClick = expendTrigger.value === 'click' || selectTrigger.value === 'click' ? handleClick : undefined
-    const onDblclick =
-      expendTrigger.value === 'dblclick' || selectTrigger.value === 'dblclick' ? handleDblclick : undefined
-    return { onClick, onDblclick }
+  const handleMouseenter = () => (isHover.value = true)
+  const handleMouseleave = () => (isHover.value = false)
+
+  const attrs = computed(() => {
+    const _expandDisabled = expandDisabled.value
+    const _expendTrigger = expendTrigger.value
+    const _selectDisabled = selectDisabled.value
+    const _selectTrigger = selectTrigger.value
+
+    const clickEnabled =
+      (!_expandDisabled && _expendTrigger === 'click') || (!_selectDisabled && _selectTrigger === 'click')
+    const dblclickEnabled =
+      (!_expandDisabled && _expendTrigger === 'dblclick') || (!_selectDisabled && _selectTrigger === 'dblclick')
+    const mouseEnabled = !_selectDisabled && showIndex.value
+
+    let cursor = ''
+    if (clickEnabled || dblclickEnabled) {
+      cursor = 'pointer'
+    } else if ((_expandDisabled && _expendTrigger) || (_selectDisabled && _selectTrigger)) {
+      cursor = 'not-allowed'
+    }
+
+    return {
+      style: cursor ? `cursor: ${cursor}` : undefined,
+      onClick: clickEnabled ? handleClick : undefined,
+      onDblclick: dblclickEnabled ? handleDblclick : undefined,
+      onMouseenter: mouseEnabled ? handleMouseenter : undefined,
+      onMouseleave: mouseEnabled ? handleMouseleave : undefined,
+    }
   })
 
-  return { expandDisabled, handleExpend, selectDisabled, handleSelect, clickEvents }
+  return { expandDisabled, handleExpend, selectDisabled, handleSelect, isHover, attrs }
 }
 
 function renderChildren(
   props: TableBodyRowProps,
   flattedColumns: ComputedRef<TableColumnMerged[]>,
-  expandDisabled: boolean,
+  expandDisabled: ComputedRef<boolean>,
   handleExpend: () => void,
   isSelected: ComputedRef<boolean>,
   isIndeterminate: ComputedRef<boolean>,
   selectDisabled: ComputedRef<boolean>,
   handleSelect: () => void,
+  isHover: Ref<boolean>,
 ) {
   const children: VNodeTypes[] = []
   const { rowIndex, record, level } = props
@@ -169,13 +190,14 @@ function renderChildren(
     }
     if (type === 'expandable') {
       colProps.expanded = props.expanded
-      colProps.disabled = expandDisabled
+      colProps.disabled = expandDisabled.value
       colProps.handleExpend = handleExpend
     } else if (type === 'selectable') {
       colProps.selected = isSelected.value
       colProps.indeterminate = isIndeterminate.value
       colProps.disabled = selectDisabled.value
       colProps.handleSelect = handleSelect
+      colProps.isHover = isHover.value
     }
     children.push(<BodyCell {...colProps}></BodyCell>)
   })
diff --git a/packages/components/table/src/types.ts b/packages/components/table/src/types.ts
index 899ca0d4b..2c52b4d4f 100644
--- a/packages/components/table/src/types.ts
+++ b/packages/components/table/src/types.ts
@@ -122,6 +122,7 @@ export interface TableColumnSelectable<T = any, K = VKey> extends TableColumnCom
   disabled?: (record: T) => boolean
   multiple?: boolean
   menus?: ('all' | 'invert' | 'none' | 'pageInvert' | MenuData)[]
+  showIndex?: boolean
   trigger?: 'click' | 'dblclick'
 
   onChange?: (selectedRowKeys: K[], selectedRows: T[]) => void
@@ -246,6 +247,7 @@ export const tableBodyCellProps = {
   disabled: { type: Boolean, default: undefined },
   expanded: { type: Boolean, default: undefined },
   handleExpend: { type: Function as PropType<() => void>, default: undefined },
+  isHover: { type: Boolean, default: undefined },
   selected: { type: Boolean, default: undefined },
   indeterminate: { type: Boolean, default: undefined },
   handleSelect: { type: Function as PropType<() => void>, default: undefined },
diff --git a/packages/pro/transfer/__tests__/__snapshots__/proTransfer.spec.ts.snap b/packages/pro/transfer/__tests__/__snapshots__/proTransfer.spec.ts.snap
index 5e3804fc4..8b52dd30b 100644
--- a/packages/pro/transfer/__tests__/__snapshots__/proTransfer.spec.ts.snap
+++ b/packages/pro/transfer/__tests__/__snapshots__/proTransfer.spec.ts.snap
@@ -198,6 +198,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                     
                     <tr
                       class="ix-table-row"
+                      style="cursor: pointer;"
                     >
                       
                       <td
@@ -254,6 +255,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                     </tr>
                     <tr
                       class="ix-table-row"
+                      style="cursor: pointer;"
                     >
                       
                       <td
@@ -310,6 +312,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                     </tr>
                     <tr
                       class="ix-table-row"
+                      style="cursor: not-allowed;"
                     >
                       
                       <td
@@ -367,6 +370,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                     </tr>
                     <tr
                       class="ix-table-row"
+                      style="cursor: pointer;"
                     >
                       
                       <td
@@ -423,6 +427,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                     </tr>
                     <tr
                       class="ix-table-row"
+                      style="cursor: pointer;"
                     >
                       
                       <td
@@ -479,6 +484,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                     </tr>
                     <tr
                       class="ix-table-row"
+                      style="cursor: pointer;"
                     >
                       
                       <td
@@ -535,6 +541,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                     </tr>
                     <tr
                       class="ix-table-row"
+                      style="cursor: pointer;"
                     >
                       
                       <td
@@ -591,6 +598,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                     </tr>
                     <tr
                       class="ix-table-row"
+                      style="cursor: pointer;"
                     >
                       
                       <td
@@ -647,6 +655,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                     </tr>
                     <tr
                       class="ix-table-row"
+                      style="cursor: not-allowed;"
                     >
                       
                       <td
@@ -704,6 +713,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                     </tr>
                     <tr
                       class="ix-table-row"
+                      style="cursor: pointer;"
                     >
                       
                       <td
@@ -760,6 +770,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                     </tr>
                     <tr
                       class="ix-table-row"
+                      style="cursor: pointer;"
                     >
                       
                       <td
@@ -816,6 +827,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                     </tr>
                     <tr
                       class="ix-table-row"
+                      style="cursor: pointer;"
                     >
                       
                       <td
@@ -872,6 +884,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                     </tr>
                     <tr
                       class="ix-table-row"
+                      style="cursor: not-allowed;"
                     >
                       
                       <td
@@ -929,6 +942,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                     </tr>
                     <tr
                       class="ix-table-row"
+                      style="cursor: pointer;"
                     >
                       
                       <td
@@ -985,6 +999,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                     </tr>
                     <tr
                       class="ix-table-row"
+                      style="cursor: pointer;"
                     >
                       
                       <td
@@ -1041,6 +1056,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                     </tr>
                     <tr
                       class="ix-table-row"
+                      style="cursor: pointer;"
                     >
                       
                       <td
@@ -1324,6 +1340,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                     
                     <tr
                       class="ix-table-row"
+                      style="cursor: pointer;"
                     >
                       
                       <td
@@ -1368,6 +1385,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                     </tr>
                     <tr
                       class="ix-table-row"
+                      style="cursor: not-allowed;"
                     >
                       
                       <td
@@ -1413,6 +1431,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                     </tr>
                     <tr
                       class="ix-table-row"
+                      style="cursor: pointer;"
                     >
                       
                       <td
@@ -1457,6 +1476,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                     </tr>
                     <tr
                       class="ix-table-row"
+                      style="cursor: pointer;"
                     >
                       
                       <td