如何使用高级表格的后台筛选功能

操作场景

后台排序必须和全局变量一起配合使用。后台分页、后台排序和后台筛选同时启用时，在添加转换器时，需要先筛选、再排序、最后分页，如图1。

图1 转换器添加顺序

后台筛选

1. 参考登录华为云Astro大屏应用界面中操作，登录华为云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 开启后台筛选
   

5. 新建全局变量。
   后台筛选需要搭配全局变量使用，请创建filters变量。

   图3 新建筛选全局变量。
   

6. 交互设置。
   1. 选中高级表格组件，单击，进行组件交互设置。
   2. 添加“点击筛选时”交互动作。
      图4 点击筛选时交互动作
      

7. 设置组件数据源。
   1. 选中组件，单击组件上方的。
   2. 选择所需的数据类型。
   3. 在全局变量配置下方，单击“+”，选择转换器，添加2创建的转换器。
      图5 添加转换器
      
   4. 在组件预览中，将表格中的字段，拖拽到对应的配置中。
      图6 从表格字段中拖拽字段到对应配置中
      
   5. 单击“保存”，完成组件数据源的配置。

8. 保存页面，预览效果。
   图7 查看后台筛选效果