在 laravel 11 / livewire 3.5 中我使用 mary-ui ^1.40.3 应用程序 我尝试使用手册中的表行扩展功能 https://mary-ui.com/docs/components/table#row-expansion
I 货币表我在表定义中添加了
expandable
,并在表块末尾添加了 @scope('expansion'
块:
<x-mary-table :headers="$headers" :rows="$currencies" striped expandable
:sort-by="$sortBy" with-pagination show-empty-text empty-text="No currencies found. Try to change filter criteria"
:per-page-values="[10, 25, 50, 100]" >
@scope('actions', $currency)
<div class="flex w-32 max-h-8">
<div class="w-16 px-2">
<x-mary-button :icon="IconEnum::Edit->value" wire:click="edit({{ $currency->id }})" spinner
class="btn-sm btn-primary max-h-6"
/>
</div>
<div class="w-16 align-items-end justify-end align-top">
<x-mary-button :icon="IconEnum::Delete->value" wire:click="delete({{ $currency->id }})" spinner
class="btn-sm btn-error max-h-6"
wire:confirm="Are you sure you want to delete this currency?"
/>
</div>
</div>
@endscope
@scope('cell_name', $currency)
<span class="whitespace-nowrap">
{{ $currency->name }}
</span>
@endscope
@scope('header_id', $header)
<h2 class="text-xl font-bold text-grey-100">
{{ $header['label'] }}
<x-mary-icon :name="IconEnum::KeyField->value"/>
</h2>
@endscope
@scope('cell_active', $currency)
@if($currency->active === CurrencyActiveEnum::ACTIVE)
<span class="whitespace-nowrap">
<x-mary-badge :value="CurrencyActiveEnum::getLabel($currency->active)" class="badge-primary"/>
</span>
@else
<span class="whitespace-nowrap">
{{ CurrencyActiveEnum::getLabel($currency->active) }}
</span>
@endif
@endscope
@scope('cell_description', $currency)
<span class="whitespace-nowrap">
<x-mary-popover>
<x-slot:trigger>
<x-mary-badge :value="Str::limit(strip_tags($currency->description), 20)"/>
</x-slot:trigger>
<x-slot:content>
{{strip_tags($currency->description) }}
</x-slot:content>
</x-mary-popover>
</span>
@endscope
@scope('cell_created_at', $currency)
<span class="whitespace-nowrap">
{{ DateConv::getFormattedDateTime($currency->created_at) }}
</span>
@endscope
{{-- Special `expansion` slot --}}
@scope('expansion', $currency)
<div class="bg-base-200 p-8 font-bold">
currency_histories_count::{{ $currency->currency_histories_count }}<hr>
user_currency_subscriptions_count::{{ $currency->user_currency_subscriptions_count }}<hr>
</div>
@endscope
</x-mary-table>
但是在我的 Chrome 浏览器的控制台中我看到错误(表格的一行有 1 个这样的错误):
livewire.js?id=ec3a716b:1120 Alpine Expression Error: this.selection.includes is not a function
Expression: "isExpanded(27) || '-rotate-90 !text-current'"
livewire.js?id=ec3a716b:1120 Alpine Expression Error: this.selection.includes is not a function
Expression: "isExpanded(27) || 'hidden'"
livewire.js?id=ec3a716b:1120 Alpine Expression Error: this.selection.includes is not a function
我看到扩展的切换器图像 - 但它已打开并且不会切换块:
我的扩展代码可能有什么问题?
您的表格中需要有wire:model =“expanded”
<x-table wire:model="expanded" expandable ...
在你的Livewire组件中
public array $expanded = [];