系统学习magento二次开发，推荐小册：《Magento中文全栈二次开发 》
本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。
Magento 2中的UI组件是一种灵活的工具，可用于创建交互式的用户界面。其中一个UI组件是过滤器组件，用于在网格视图中添加过滤器。下面是过滤器组件的代码示例：
<listingToolbar name="listing_top">
<filters name="listing_filters">
<filterSelect name="status" provider="${ $.provider }">
<settings>
<caption translate="true">Status</caption>
<options>
<option name="all" value=""/>
<option name="enabled" value="1"/>
<option name="disabled" value="0"/>
</options>
</settings>
</filterSelect>
<filterRange name="created_at" provider="${ $.provider }">
<settings>
<caption translate="true">Created At</caption>
<template>
<div class="range">
<div class="field date">
<label>${ $.$data.fromLabel }</label>
<div class="control">
<datetimepicker class="admin__field-date"
valueformat="yyyy-MM-dd"
timeformat="HH:mm:ss"
timezone="${ $.$data.storeTimeZone }"
value="{{ $.$data.from }}"
data-role="datetimepicker">
</datetimepicker>
</div>
</div>
<div class="field date">
<label>${ $.$data.toLabel }</label>
<div class="control">
<datetimepicker class="admin__field-date"
valueformat="yyyy-MM-dd"
timeformat="HH:mm:ss"
timezone="${ $.$data.storeTimeZone }"
value="{{ $.$data.to }}"
data-role="datetimepicker">
</datetimepicker>
</div>
</div>
</div>
</template>
</settings>
</filterRange>
</filters>
</listingToolbar>在这个示例中，我们创建了两个过滤器，一个是select过滤器，另一个是range过滤器。select过滤器允许用户从预定义的选项中选择一个值，而range过滤器允许用户指定一个范围。
要添加过滤器组件，我们首先创建一个名为listingToolbar的父组件，并在其中创建一个名为filters的子组件。然后我们添加两个过滤器：一个是select过滤器，名为status，另一个是range过滤器，名为created_at。
对于每个过滤器，我们可以指定其名称、提供者和设置。例如，对于select过滤器，我们设置了一个标题和三个选项，分别是“全部”、“启用”和“禁用”。而对于range过滤器，我们设置了一个标题和一个模板，该模板定义了两个日期选择器，一个用于起始日期，另一个用于结束日期。
需要注意的是，这只是一个过滤器组件的示例，您可以根据您的需求添加或修改过滤器的设置和选项。