页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

1 业务场景

在分析全国订单销售数据时,通过切换区域、省份和城市筛选器过滤数据,由于区域、省份和城市是有关联的,为避免出现过滤后无数据,希望在3个筛选器之间设置联动关系。

具体的操作效果:区域联动省份和城市,省份联动城市,根据城市筛选器的值过滤表格数据。为避免表格数据过多,城市筛选器希望默认选择当前备选值列表的第一个值,效果如下图所示:

2 操作步骤

2.1 创建组件

1、以产品内置Demo资源的“订单模型”作为数据来源。

...

5、三个筛选器创建完成后的效果如下,由于城市筛选器默认是选择列表第一个值,所以此时默认按照北京去筛选表格的数据,而区域和省份没有设置默认值,所以筛选器框内为空。

2.2 设置联动关系

点击组件工具栏的 ,设置筛选器的应用范围,下图以区域筛选器为例:

  • 区域筛选器应用于:筛选_1、筛选_2,其中筛选_1指的是城市筛选器,筛选_2指的是省份筛选器。
  • 省份筛选器应用于:筛选_1,其中筛选_1指的是城市筛选器。
  • 城市筛选器应用于:图表_1。

2.3 查看联动效果

区域筛选器选择 华北 ,此时省份筛选器的备选值将根据华北进行过滤,只列出华北区域内的省份;省份筛选器选择 河北省 ,此时城市筛选器的备选值将根据河北省进行过滤,且默认选择过滤列表后的第一个值,可以切换城市筛选器的值,查看不同城市的订单数据。效果如下图所示:

...