使用ivx实现多级下拉菜单联动效果的经验总结

在实际案例中经常会有这样的场景，我们需要对一些信息进行选择，同时这些数据之间还有明确的层级关系，比如选择省市区或者组织部门，当前一个下拉菜单选项固定后下一层级的下拉菜单选项是要随之改变的。今天就说一说如何实现这种多级下拉菜单联动的效果。

1.下拉菜单
下拉菜单是拓展组件的一种，选中下拉菜单再点击拓展组件可以添加下拉菜单选项和下拉菜单选择组两种子组件，下拉菜单选择组内也可以添加下拉菜单选项，它主要是用于选项比较多时对选项进行一个分组展示。


我们可以关闭自定义选项，自己输入一些选项并用逗号分开，此时我们在下拉菜单中添加的下拉菜单和选择就都不会生效了。开启自定义选项则显示的选项就是我们添加的下拉菜单选项了。


在下拉菜单的选择选项事件下，我们可以收到一个参数选中值，就是下拉菜单当前的选择项。其它组件也可以获取下拉菜单的当前选中值。


2.通用变量
通用变量为 Object 类型的数据变量，其初始值为空对象“{ }”。通用变量是一种结构化的数据变量，用于存储具有多级结构的数据。在使用通用变量时，可以通过添加节点的方式将变量结构化，也可以通过导入JSON格式的数据，自动生成各级节点。

我们可以看一下demo中的通用变量的结构，这个通用变量本身是一个对象，对象内包含两个元素，Province和city，其中Province的属性是一个字符串，city的属性是一个数组，而city数组的每一个元素又都是一个对象，且此对象包含两个子元素name和area，其中name的属性是一个字符串，而area的属性也是一个数组，area数组中的每一个元素的属性是一个字符串。


3.案例组件结构和数据绑定

省这里比较简单，直接将文本组件的内容数据绑定为通用变量的Province元素即可。

然后是市的部分，这里我们在下拉菜单中用for循环创建下拉菜单选项。数据来源是通用变量中的city数组（注意for容器的数据来源一定要是通用变量中属性为数组的元素或者通用变量本身是数组）。然后我们前面已经说过了city数组中的每一个元素属性都是对象且包含两个子元素name和area数组，我们将下拉选项菜单的内容绑定为其中的name就可以了。


最后是区的部分，最外层的for循环创建数据来源是city数组，是为了创建city[0],city[1],city[2]三个对象。if容器则是从三个city[n]对象里面挑出name与已选中的市名称一致的那个。第二层循环创建才是真正的循环创建下拉菜单 。数据来源就是之前筛选出来的city[n]对象的area元素，数据绑定的话就是当前数据2，即area数组中的区名元素。

4.级联选择器
其实还有一种组件可以实现类似的功能，不过不是采用下拉而是选择器的样式。我们可以在拓展组件中的选择器中找到这个级联选择器。

它的列表数据是一个对象数组，一共有多少个层级就有多少个列，除了最后一列的最终选项，前面的列都代表了它所属的层级，显然可知最低层级的选择项总共有多少个对象数组就有多少行元素。

在级联选择器的事件中，我们可以得到一个反馈的参数——选中值，就是当前级联选择器的选中结果，这个结果是一个由该行数据组成的一个一位数组。我们也可以在选中值后面加中括号只选取选中值的一部分。


当然，在其他组件中我们也可以获取级联选择器的选中值，或者进行数据绑定。

总结
用通用变量实现多级下拉菜单联动的效果，主要难点还是在于对通用变量的结构理解上。对我而言呢，跟对象数组的行列结构相比通用变量更像是一种树形结构，具体到某一元素不是依靠行列，而是根据父对象层层选中。这一点大家可以多找几个通用变量观察一下结构，然后在案例中多加练习。