自定义 Admin Grid 卡在 Loading 时,我以前总先怀疑 SQL。后来发现很多时候接口已经 200,真正卡住的是 UI Component 找不到它等待的组件,spinner 就永远不会被替换掉。

先在浏览器里把UI组件日志打开

控制台执行:

require([
    'Magento_Ui/js/lib/logger/console-logger',
    'Magento_Ui/js/lib/logger/levels-pool'
], function (logger) {
    logger.setDisplayLevel(5);
});

刷新页面后,重点看 provider、deps 或 columns 组件未加载的警告。这比只看 var/log 快,因为 XML 能通过服务端解析,不代表前端组件名能对上。

把provider、dataSource和spinner三个名字逐字对齐

一个可工作的结构至少要保证:

<item name="provider" xsi:type="string">
    vendor_module_listing.vendor_module_listing_data_source
</item>
<item name="spinner" xsi:type="string">vendor_module_columns</item>

并且下面真实存在同名的:

<dataSource name="vendor_module_listing_data_source" component="Magento_Ui/js/grid/provider">
    <settings>
        <updateUrl path="mui/index/render"/>
    </settings>
</dataSource>
<columns name="vendor_module_columns">

Grid 不要直接复用编辑表单的 DataProvider。列表需要返回 items 和 totalRecords,Collection 还要正确注册到 CollectionFactory。Network 虽然是 200,但返回结构不对时,provider 仍然无法完成初始化。

修改后清 config、layout 缓存,删除浏览器 Local Storage 中这个 listing 的旧 bookmark 再测试。看到 mui/index/render 返回正确 JSON、Loading 消失并能翻页,才算真正修好。