Mary UI表格expandable行展开功能失效问题排查

核心问题 #

报错this.selection.includes is not a function的本质是：前端Alpine代码尝试调用includes方法的selection变量不是数组类型，导致方法不存在。

在Mary UI的expandable表格实现中，默认依赖Livewire组件内的$expanded数组来跟踪已展开的行ID。如果你的Livewire组件没有正确初始化这个属性，或者将其设置为非数组值（比如null、字符串、单个ID），就会触发该错误，进而导致展开切换图标异常、无法正常展开/收起内容。

具体修复步骤 #

1. 在Livewire组件中添加并初始化$expanded数组
   在你的Livewire组件类中，声明一个公共数组属性：

   public $expanded = [];
   

   这个属性会被Mary UI的表格组件自动识别，用来存储所有展开行的ID，确保前端可以调用数组的includes方法判断行是否展开。

2. 检查自定义行展开逻辑（如果有）
   如果你手动修改了展开状态的跟踪逻辑（比如不用默认的$expanded，改用自定义属性），需要确保：

   • 自定义属性是数组类型，初始化为空数组
   • 在表格组件中通过expandable="your_custom_property"指定自定义属性名，比如：

     <x-mary-table :data="$data" expandable="customExpanded">
         <!-- 表格内容 -->
     </x-mary-table>
     

   同时保证自定义属性在Livewire组件中正确声明：

   public $customExpanded = [];
   

3. 验证@scope('expansion')作用域的正确性
   确保展开内容的作用域代码没有语法错误，比如：

   @scope('expansion', $item)
       <div class="p-4 bg-gray-50">
           <!-- 展开后的内容，比如显示行数据的详细信息 -->
           {{ $item->description }}
       </div>
   @endscope
   

   这里的$item要和表格的数据源变量对应，确保可以正确获取行数据。

4. 清除缓存并重新加载
   执行以下命令清除Laravel和Livewire的缓存，避免旧代码残留：

   php artisan cache:clear
   php artisan view:clear
   php artisan livewire:clear
   

额外注意事项 #

• 确保Mary UI（^1.40.3）和Livewire 3.5版本兼容，两者版本匹配是功能正常运行的前提。
• 检查浏览器控制台是否有其他报错（比如数据加载失败、变量未定义等），这些可能间接导致展开功能异常。

内容的提问来源于stack exchange，提问作者mstdmstd