diff --git a/packages/components/checkbox/style/index.less b/packages/components/checkbox/style/index.less index dc1b5ef98..a53b005d4 100644 --- a/packages/components/checkbox/style/index.less +++ b/packages/components/checkbox/style/index.less @@ -7,6 +7,7 @@ display: inline-flex; align-items: center; + vertical-align: middle; line-height: unset; cursor: pointer; color: var(--ix-color-text); diff --git a/packages/components/table/src/main/body/BodyCell.tsx b/packages/components/table/src/main/body/BodyCell.tsx index 2f5f28f8a..bf3fb2929 100644 --- a/packages/components/table/src/main/body/BodyCell.tsx +++ b/packages/components/table/src/main/body/BodyCell.tsx @@ -103,15 +103,22 @@ export default defineComponent({ return () => { const { column } = props + const prefixCls = mergedPrefixCls.value const { type } = column as BodyColumn let children: VNodeChild let title: string | undefined if (type === 'selectable') { - children = renderSelectableChildren(rowContext, slots, selectable, config, mergedPagination) + children = renderSelectableChildren(rowContext, slots, selectable, config, mergedPagination, prefixCls) } else if (type === 'indexable') { - children = renderIndexableChildren(rowContext, slots, column as TableColumnIndexable, mergedPagination) + children = renderIndexableChildren( + rowContext, + slots, + column as TableColumnIndexable, + mergedPagination, + prefixCls, + ) } else { const text = dataValue.value children = renderChildren(rowContext, props, slots, text) @@ -128,7 +135,7 @@ export default defineComponent({ // see: https://github.com/IDuxFE/idux/issues/1081 if (props.column.fixed && mergedEllipsis.value && (isFixStartLast.value || isFixEndFirst.value)) { - children = {children} + children = {children} } const customAdditionalFn = tableProps.customAdditional?.bodyCell @@ -140,9 +147,9 @@ export default defineComponent({ const contentNode = type === 'expandable' ? ( -
- {renderExpandableChildren(rowContext, slots, expandable, isTreeData, mergedPrefixCls.value)} - {!isEmptyNode(children) && } +
+ {renderExpandableChildren(rowContext, slots, expandable, isTreeData, prefixCls)} + {!isEmptyNode(children) && } {children}
) : ( @@ -272,6 +279,7 @@ function renderSelectableChildren( selectable: ComputedRef, config: TableConfig, mergedPagination: ComputedRef, + prefixCls: string, ) { const { props: { record, rowIndex }, @@ -291,8 +299,14 @@ function renderSelectableChildren( } } - if (!isSelected.value && !isHover && showIndex) { - return renderIndexableChildren(rowContext, slots, config.columnIndexable as TableColumnIndexable, mergedPagination) + if (!isSelected.value && !isHover.value && showIndex) { + return renderIndexableChildren( + rowContext, + slots, + config.columnIndexable as TableColumnIndexable, + mergedPagination, + prefixCls, + ) } const customRender = isString(customCell) ? slots[customCell] : customCell @@ -320,6 +334,7 @@ function renderIndexableChildren( slots: Slots, indexable: TableColumnIndexable, mergedPagination: ComputedRef, + prefixCls: string, ) { const { props: { record, rowIndex }, @@ -332,6 +347,7 @@ function renderIndexableChildren( __DEV__ && Logger.warn('components/table', 'invalid customCell, please check the column is correct') return undefined } - const style = selectDisabled.value ? 'cursor: not-allowed' : 'cursor: pointer' - return {customRender({ record, rowIndex, pageIndex, pageSize })} + + const classes = [`${prefixCls}-indexable`, selectDisabled.value && `${prefixCls}-indexable-disabled`] + return {customRender({ record, rowIndex, pageIndex, pageSize })} } diff --git a/packages/components/table/style/index.less b/packages/components/table/style/index.less index 601e87919..b48b7c485 100644 --- a/packages/components/table/style/index.less +++ b/packages/components/table/style/index.less @@ -9,6 +9,7 @@ @import './size.less'; @import './expandable.less'; @import './selectable.less'; +@import './indexable.less'; @import './triggers.less'; @import './shadow.less'; diff --git a/packages/components/table/style/indexable.less b/packages/components/table/style/indexable.less new file mode 100644 index 000000000..eb37e9898 --- /dev/null +++ b/packages/components/table/style/indexable.less @@ -0,0 +1,11 @@ +.@{table-prefix} { + &-indexable { + color: var(--ix-color-text); + cursor: pointer; + + &&-disabled { + color: var(--ix-color-text-disabled); + cursor: not-allowed; + } + } +} \ No newline at end of file