Commit 044e2e4e866dd5b120daab03c47aba1ca1f9140a
1 parent
59a90877
fix(table): `rowClassName` not worked with `striped`
修复rowClassName属性无法和striped同时生效的问题 fixed: #1167
Showing
3 changed files
with
9 additions
and
5 deletions
CHANGELOG.zh_CN.md
@@ -4,6 +4,7 @@ | @@ -4,6 +4,7 @@ | ||
4 | - **BasicTable** | 4 | - **BasicTable** |
5 | - 单元格编辑新增提交回调,将根据回调函数返回的结果来决定是否将数据提交到表格 | 5 | - 单元格编辑新增提交回调,将根据回调函数返回的结果来决定是否将数据提交到表格 |
6 | - 行编辑添加校验方法,允许只校验而不提交值,以便异步保存数据成功后才提交倒表格 | 6 | - 行编辑添加校验方法,允许只校验而不提交值,以便异步保存数据成功后才提交倒表格 |
7 | + - 修复`rowClassName`属性无法和`striped`同时使用的问题 | ||
7 | 8 | ||
8 | ### 🐛 Bug Fixes | 9 | ### 🐛 Bug Fixes |
9 | 10 |
src/components/Table/src/hooks/useTableStyle.ts
@@ -6,11 +6,14 @@ import { isFunction } from '/@/utils/is'; | @@ -6,11 +6,14 @@ import { isFunction } from '/@/utils/is'; | ||
6 | export function useTableStyle(propsRef: ComputedRef<BasicTableProps>, prefixCls: string) { | 6 | export function useTableStyle(propsRef: ComputedRef<BasicTableProps>, prefixCls: string) { |
7 | function getRowClassName(record: TableCustomRecord, index: number) { | 7 | function getRowClassName(record: TableCustomRecord, index: number) { |
8 | const { striped, rowClassName } = unref(propsRef); | 8 | const { striped, rowClassName } = unref(propsRef); |
9 | - if (!striped) return; | 9 | + const classNames: string[] = []; |
10 | + if (striped) { | ||
11 | + classNames.push((index || 0) % 2 === 1 ? `${prefixCls}-row__striped` : ''); | ||
12 | + } | ||
10 | if (rowClassName && isFunction(rowClassName)) { | 13 | if (rowClassName && isFunction(rowClassName)) { |
11 | - return rowClassName(record); | 14 | + classNames.push(rowClassName(record, index)); |
12 | } | 15 | } |
13 | - return (index || 0) % 2 === 1 ? `${prefixCls}-row__striped` : ''; | 16 | + return classNames.filter((cls) => !!cls).join(' '); |
14 | } | 17 | } |
15 | 18 | ||
16 | return { getRowClassName }; | 19 | return { getRowClassName }; |
src/components/Table/src/types/table.ts
@@ -25,7 +25,7 @@ export interface TableRowSelection<T = any> extends ITableRowSelection { | @@ -25,7 +25,7 @@ export interface TableRowSelection<T = any> extends ITableRowSelection { | ||
25 | 25 | ||
26 | /** | 26 | /** |
27 | * Callback executed when select/deselect one row | 27 | * Callback executed when select/deselect one row |
28 | - * @type FunctionT | 28 | + * @type Function |
29 | */ | 29 | */ |
30 | onSelect?: (record: T, selected: boolean, selectedRows: Object[], nativeEvent: Event) => any; | 30 | onSelect?: (record: T, selected: boolean, selectedRows: Object[], nativeEvent: Event) => any; |
31 | 31 | ||
@@ -291,7 +291,7 @@ export interface BasicTableProps<T = any> { | @@ -291,7 +291,7 @@ export interface BasicTableProps<T = any> { | ||
291 | * Row's className | 291 | * Row's className |
292 | * @type Function | 292 | * @type Function |
293 | */ | 293 | */ |
294 | - rowClassName?: (record: TableCustomRecord<T>) => string; | 294 | + rowClassName?: (record: TableCustomRecord<T>, index: number) => string; |
295 | 295 | ||
296 | /** | 296 | /** |
297 | * Row selection config | 297 | * Row selection config |