
# 如何使用高级表格的后台筛选功能
#### 操作场景
后台排序必须和全局变量一起配合使用。后台分页、后台排序和后台筛选同时启用时，在添加转换器时，需要先筛选、再排序、最后分页，如[图1]。
图1转换器添加顺序   
![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123185160.png "点击放大")
#### 后台筛选
1. 参考[登录华为云Astro大屏应用界面](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6008.html)中操作，登录华为云Astro大屏应用界面。
2. 新建后台筛选转换器。
   
   1. 在主菜单中，选择"数据中心"。
   
   2. 在左侧导航栏中，选择"转换器 \> 全部"，单击"新建转换器"。
   
   3. 输入转换器名称和分类，单击"确定"。
   
   4. 输入转换器代码，单击"保存"。
      ```
      let data = [...dataset];
      const filter = $pageStore.filters
      let filterObj = "";
      try {
          filterObj = JSON.parse(filter);
      } catch {
          filterObj = filter;
      }
      const keys = Object.keys(filterObj);
      data = data.filter(item => {
          return keys.every(key => {
              if (!filterObj[key].length) {
                  return true;
              }
              return filterObj[key].includes(item[key]);
          })
      })
      return data;
      ```
      
   
   
   
   
3. 新建一个大屏页面，从"全部组件 \> 文本"中，拖拽"高级表格"组件至画布空白区域。
4. 开启后台筛选功能。 
   图2开启后台筛选   
   ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158306829.png "点击放大")
   
   
5. 新建全局变量。 
   后台筛选需要搭配全局变量使用，请创建filters变量。
   图3新建筛选全局变量。   
   ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123027044.png "点击放大")
   
   
6. 交互设置。 
   1. 选中高级表格组件，单击![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002148213325.png)，进行组件交互设置。
   
   2. 添加"点击筛选时"交互动作。
      图4点击筛选时交互动作   
      ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123027072.png "点击放大") 
   
   
   
   
7. 设置组件数据源。 
   1. 选中组件，单击组件上方的![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002112534904.png)。
   
   2. 选择所需的数据类型。
   
   3. 在全局变量配置下方，单击"+"，选择转换器，添加[2]创建的转换器。
      图5添加转换器   
      ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158425205.png "点击放大") 
   
   4. 在组件预览中，将表格中的字段，拖拽到对应的配置中。
      图6从表格字段中拖拽字段到对应配置中   
      ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123185188.png "点击放大") 
   
   5. 单击"保存"，完成组件数据源的配置。
   
   
   
   
8. 保存页面，预览效果。 
   图7查看后台筛选效果   
   ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123027076.png)
   
   
 
