本教程第 147 个步骤，我们介绍了 SAP UI5 Smart Table 控件的用法：

* [SAP UI5 应用开发教程之一百四十七 - SAP UI5 SmartTable 控件的使用介绍](https://jerry.blog.csdn.net/article/details/127871253)

如下图所示：

![](https://img-blog.csdnimg.cn/img_convert/03d31d1e236862e689a056b6643a23a7.png)

本步骤我们在 Smart Table 本身的基础上再进一步，学习如何将 Smart Table 配合 Smart Filter Bar 共同使用。

先看一下效果。我们进入文件夹 154，运行命令行 `ui5 serve`，可以看到 Smart Table 控件上方的 Filter Bar 控件，当前默认显示的 filter 为 Category 字段。

![](https://img-blog.csdnimg.cn/img_convert/7bfaf66acb2ab58ee090f2cb426175dc.png)

我们可以为这个 Category 字段维护值，让这个值对 Smart Table 里显示的内容进行过滤。

首先点击 Category 字段如下图图例1所示的图标，在弹出的 Category 所有可选值下拉窗口里，选择 `Accessory`：

![](https://img-blog.csdnimg.cn/img_convert/a1150bf2081c7f8afac54e5b2237fabb.png)

然后点击 OK：

![](https://img-blog.csdnimg.cn/img_convert/095b5049db3ee1880fb1bfc21c88792d.png)

点击 Smart Filter Bar 正上方的 Go 按钮，就可以对 Smart Table 进行过滤，从而让那些只有满足过滤条件即 Category 等于 Accessory 的产品数据显示出来，一共只有 4 条。

![](https://img-blog.csdnimg.cn/img_convert/231a7e12ece48ff45bfc339c26125f37.png)

我们还可以点击 Filters 超链接：

![](https://img-blog.csdnimg.cn/img_convert/05a66181992ecb4ccb90ab530a649ba7.png)

将另一个支持的 Currency filter 也配置出来：
![](https://img-blog.csdnimg.cn/img_convert/ce7b1796a6e2e8b7ae4874c090542d95.png)

现在可以看到 Currency 字段出现在 Smart Filter Bar 区域了：
![](https://img-blog.csdnimg.cn/img_convert/c12c224a60ba717489c8dd5d62a7a6b8.png)

点击 Value Help，选择 EUR 这个货币单位作为 filter：

![](https://img-blog.csdnimg.cn/img_convert/7ed96e933cfba5b3c8f83fe67b95b115.png)

点击 Go 按钮，就可以看到所有货币单位为 EUR 的产品了。

![](https://img-blog.csdnimg.cn/img_convert/3b465b5e2a2fd99bed4fc0471747551d.png)

[下面](https://jerry.blog.csdn.net/article/details/128414664)是详细的实现步骤讲解。

ITPub博客

SAP UI5 Smart Table 和 Smart Filter Bar 的联合使用方法介绍试读版