feat(comp:table): selectable supports showIndex

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

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),
 })
 

packages/components/table/src/main/body/BodyCell.tsx

@@ -206,9 +206,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>

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>)
   })

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 },

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