Skip to content

Commit

Permalink
fix(comp:table): height of checkbox or radio in selectable column cel…
Browse files Browse the repository at this point in the history 
…l isn't right (#1859)
  • Loading branch information
@sallerli1
sallerli1 committed Mar 5, 2024
1 parent 654ad1a commit 690fab8
Show file tree
Hide file tree
Showing 7 changed files with 52 additions and 47 deletions.
1 change: 1 addition & 0 deletions packages/components/radio/style/index.less
View file
Expand Up @@ -7,6 +7,7 @@

display: inline-flex;
align-items: center;
vertical-align: middle;
line-height: unset;
cursor: pointer;

Expand Down
40 changes: 20 additions & 20 deletions packages/components/table/__tests__/__snapshots__/table.spec.ts.snap
View file

Large diffs are not rendered by default.

4 changes: 0 additions & 4 deletions packages/components/table/demo/Selectable.vue
View file
Expand Up @@ -9,9 +9,6 @@
<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>
</template>
Expand Down Expand Up @@ -46,7 +43,6 @@ const columns: TableColumn<Data>[] = [
{
title: 'Name',
dataKey: 'name',
customCell: 'name',
},
{
title: 'Age',
Expand Down
5 changes: 3 additions & 2 deletions packages/components/table/src/main/body/BodyCell.tsx
View file
Expand Up @@ -65,13 +65,14 @@ export default defineComponent({
})

const classes = computed(() => {
const { fixed, align } = props.column as BodyColumn
const { fixed, align, type } = props.column as BodyColumn
const prefixCls = mergedPrefixCls.value
let classes = {
[`${prefixCls}-cell`]: true,
[`${prefixCls}-cell-sorted`]: !!activeSortOrderBy.value,
[`${prefixCls}-cell-align-${align.cell}`]: !!align && align.cell != 'start',
[`${prefixCls}-cell-ellipsis`]: !!mergedEllipsis.value,
[`${prefixCls}-cell-${type}`]: !!type,
}
if (fixed) {
classes = {
Expand Down Expand Up @@ -348,6 +349,6 @@ function renderIndexableChildren(
return undefined
}

const classes = [`${prefixCls}-indexable`, selectDisabled.value && `${prefixCls}-indexable-disabled`]
const classes = [`${prefixCls}-indexable-label`, selectDisabled.value && `${prefixCls}-indexable-label-disabled`]
return <span class={classes}>{customRender({ record, rowIndex, pageIndex, pageSize })}</span>
}
2 changes: 1 addition & 1 deletion packages/components/table/style/indexable.less
View file
@@ -1,5 +1,5 @@
.@{table-prefix} {
&-indexable {
&-indexable-label {
color: var(--ix-color-text);
cursor: pointer;

Expand Down
7 changes: 7 additions & 0 deletions packages/components/table/style/selectable.less
View file
Expand Up @@ -14,4 +14,11 @@
background: var(--ix-table-body-row-bg-color-selected);
}
}

& td.@{table-prefix}-cell-selectable {
.@{checkbox-prefix},
.@{radio-prefix} {
line-height: 1;
}
}
}
40 changes: 20 additions & 20 deletions packages/pro/transfer/__tests__/__snapshots__/proTransfer.spec.ts.snap
View file
Expand Up @@ -209,7 +209,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
<td
class="ix-table-cell"
class="ix-table-cell ix-table-cell-selectable"
>
<label
aria-checked="false"
Expand Down Expand Up @@ -264,7 +264,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
<td
class="ix-table-cell"
class="ix-table-cell ix-table-cell-selectable"
>
<label
aria-checked="false"
Expand Down Expand Up @@ -319,7 +319,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
<td
class="ix-table-cell"
class="ix-table-cell ix-table-cell-selectable"
>
<label
aria-checked="false"
Expand Down Expand Up @@ -375,7 +375,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
<td
class="ix-table-cell"
class="ix-table-cell ix-table-cell-selectable"
>
<label
aria-checked="false"
Expand Down Expand Up @@ -430,7 +430,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
<td
class="ix-table-cell"
class="ix-table-cell ix-table-cell-selectable"
>
<label
aria-checked="false"
Expand Down Expand Up @@ -485,7 +485,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
<td
class="ix-table-cell"
class="ix-table-cell ix-table-cell-selectable"
>
<label
aria-checked="false"
Expand Down Expand Up @@ -540,7 +540,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
<td
class="ix-table-cell"
class="ix-table-cell ix-table-cell-selectable"
>
<label
aria-checked="false"
Expand Down Expand Up @@ -595,7 +595,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
<td
class="ix-table-cell"
class="ix-table-cell ix-table-cell-selectable"
>
<label
aria-checked="false"
Expand Down Expand Up @@ -650,7 +650,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
<td
class="ix-table-cell"
class="ix-table-cell ix-table-cell-selectable"
>
<label
aria-checked="false"
Expand Down Expand Up @@ -706,7 +706,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
<td
class="ix-table-cell"
class="ix-table-cell ix-table-cell-selectable"
>
<label
aria-checked="false"
Expand Down Expand Up @@ -761,7 +761,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
<td
class="ix-table-cell"
class="ix-table-cell ix-table-cell-selectable"
>
<label
aria-checked="false"
Expand Down Expand Up @@ -816,7 +816,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
<td
class="ix-table-cell"
class="ix-table-cell ix-table-cell-selectable"
>
<label
aria-checked="false"
Expand Down Expand Up @@ -871,7 +871,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
<td
class="ix-table-cell"
class="ix-table-cell ix-table-cell-selectable"
>
<label
aria-checked="false"
Expand Down Expand Up @@ -927,7 +927,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
<td
class="ix-table-cell"
class="ix-table-cell ix-table-cell-selectable"
>
<label
aria-checked="false"
Expand Down Expand Up @@ -982,7 +982,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
<td
class="ix-table-cell"
class="ix-table-cell ix-table-cell-selectable"
>
<label
aria-checked="false"
Expand Down Expand Up @@ -1037,7 +1037,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
<td
class="ix-table-cell"
class="ix-table-cell ix-table-cell-selectable"
>
<label
aria-checked="false"
Expand Down Expand Up @@ -1326,7 +1326,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
<td
class="ix-table-cell"
class="ix-table-cell ix-table-cell-selectable"
>
<label
aria-checked="false"
Expand Down Expand Up @@ -1371,7 +1371,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
<td
class="ix-table-cell"
class="ix-table-cell ix-table-cell-selectable"
>
<label
aria-checked="false"
Expand Down Expand Up @@ -1417,7 +1417,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
<td
class="ix-table-cell"
class="ix-table-cell ix-table-cell-selectable"
>
<label
aria-checked="false"
Expand Down Expand Up @@ -1462,7 +1462,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
<td
class="ix-table-cell"
class="ix-table-cell ix-table-cell-selectable"
>
<label
aria-checked="false"
Expand Down

0 comments on commit 690fab8

Please sign in to comment.