|
63 | 63 | <tbody>
|
64 | 64 | <template v-for="(item, itemIndex) in items" :key="itemIndex">
|
65 | 65 | <tr
|
66 |
| - :class="getRowClasses(item)" |
| 66 | + :class="getRowClasses(item, 'row')" |
67 | 67 | @click="!filterEvent($event) && onRowClick(item, itemIndex, $event)"
|
68 | 68 | @dblclick="!filterEvent($event) && onRowDblClick(item, itemIndex, $event)"
|
69 | 69 | @mouseenter="!filterEvent($event) && onRowMouseEnter(item, itemIndex, $event)"
|
|
108 | 108 | </td>
|
109 | 109 | </tr>
|
110 | 110 |
|
111 |
| - <tr v-if="item._showDetails === true && $slots['row-details']" :class="getRowClasses(item)"> |
| 111 | + <tr |
| 112 | + v-if="item._showDetails === true && $slots['row-details']" |
| 113 | + :class="getRowClasses(item, 'row-details')" |
| 114 | + > |
112 | 115 | <td :colspan="computedFieldsTotal">
|
113 | 116 | <slot name="row-details" :item="item" :toggle-details="() => toggleRowDetails(item)" />
|
114 | 117 | </td>
|
115 | 118 | </tr>
|
116 | 119 | </template>
|
117 |
| - <tr |
118 |
| - v-if="busyBoolean" |
119 |
| - class="b-table-busy-slot" |
120 |
| - :class="{'b-table-static-busy': items.length === 0}" |
121 |
| - > |
| 120 | + <tr v-if="busyBoolean" class="b-table-busy-slot" :class="getBusyRowClasses()"> |
122 | 121 | <td :colspan="computedFieldsTotal">
|
123 | 122 | <slot name="table-busy">
|
124 | 123 | <div class="d-flex align-items-center justify-content-center gap-2">
|
@@ -224,6 +223,7 @@ const props = withDefaults(
|
224 | 223 | emptyFilteredText?: string
|
225 | 224 | tableClasses?: Record<string, any>
|
226 | 225 | fieldColumnClasses?: (field: TableFieldObject) => Record<string, any>[]
|
| 226 | + tbodyTrClass?: (item: TableItem | null, type: string) => string | Array<any> | null | undefined |
227 | 227 | }>(),
|
228 | 228 | {
|
229 | 229 | perPage: undefined,
|
@@ -445,13 +445,35 @@ const getFieldRowClasses = (field: TableFieldObject, tr: TableItem) => [
|
445 | 445 | },
|
446 | 446 | ]
|
447 | 447 |
|
448 |
| -const getRowClasses = (item: TableItem) => [ |
449 |
| - item._rowVariant ? `table-${item._rowVariant}` : null, |
450 |
| - item._rowVariant ? `table-${item._rowVariant}` : null, |
451 |
| - selectableBoolean.value && selectedItems.value.has(item) |
452 |
| - ? `selected table-${props.selectionVariant}` |
453 |
| - : null, |
454 |
| -] |
| 448 | +const getRowClasses = (item: TableItem, type = 'row') => { |
| 449 | + const classesArray = [ |
| 450 | + item._rowVariant ? `table-${item._rowVariant}` : null, |
| 451 | + item._rowVariant ? `table-${item._rowVariant}` : null, |
| 452 | + selectableBoolean.value && selectedItems.value.has(item) |
| 453 | + ? `selected table-${props.selectionVariant}` |
| 454 | + : null, |
| 455 | + ] |
| 456 | +
|
| 457 | + if (props.tbodyTrClass) { |
| 458 | + const extraClasses = props.tbodyTrClass(item, type) |
| 459 | + if (extraClasses) { |
| 460 | + classesArray.push(...(typeof extraClasses === 'string' ? [extraClasses] : extraClasses)) |
| 461 | + } |
| 462 | + } |
| 463 | + return classesArray |
| 464 | +} |
| 465 | +
|
| 466 | +const getBusyRowClasses = () => { |
| 467 | + const classesArray = [{'b-table-static-busy': props.items.length === 0}] |
| 468 | +
|
| 469 | + if (props.tbodyTrClass) { |
| 470 | + const extraClasses = props.tbodyTrClass(null, 'table-busy') |
| 471 | + if (extraClasses) { |
| 472 | + classesArray.push(...(typeof extraClasses === 'string' ? [extraClasses] : extraClasses)) |
| 473 | + } |
| 474 | + } |
| 475 | + return classesArray |
| 476 | +} |
455 | 477 |
|
456 | 478 | const selectAllRows = () => {
|
457 | 479 | if (!selectableBoolean.value) return
|
|
0 commit comments