系统学习magento二次开发，推荐小册：《Magento中文全栈二次开发 》

FiltersChips 组件是 Magento 2 中的一个 UI 组件，用于在用户使用过滤器时，在顶部显示应用的过滤器标签。此组件将所有过滤器值集中在一起，并根据它们的值动态创建相应的标签。它还允许用户删除特定的过滤器标签。

以下是 FiltersChips 组件的示例代码：

XML 布局文件：

<listing ...>
    <filters name="listing_filters">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filters_applied" xsi:type="boolean">false</item>
                <item name="chipsConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">your_grid_listing.your_grid_listing_data_source</item>
                    <item name="name" xsi:type="string">sales_order_grid_filter</item>
                </item>
            </item>
        </argument>
    </filters>
</listing>

JS 组件文件：

define([
    'uiComponent',
    'Magento_Ui/js/grid/filters/chips'
], function (Component, Chips) {
    'use strict';
    return Component.extend({
        initialize: function (config) {
            this._super();
            Chips(config.chipsConfig, '[data-role=filters-chips]', config.provider);
        }
    });
});

在 XML 布局文件中，可以看到 filters 元素的 data 部分包含 FiltersChips 组件的配置。其中，filters_applied 用于指示是否应用过滤器，chipsConfig 用于设置组件的配置。在 JS 组件文件中，使用 Chips 来初始化组件，并将 chipsConfig 和 provider 传递给它。