使用ivx实现多级下拉菜单联动效果的经验总结
在实际案例中经常会有这样的场景,我们需要对一些信息进行选择,同时这些数据之间还有明确的层级关系,比如选择省市区或者组织部门,当前一个下拉菜单选项固定后下一层级的下拉菜单选项是要随之改变的。今天就说一说如何实现这种多级下拉菜单联动的效果。 1.下拉菜单 下拉菜单是拓展组件的一种,选中下拉菜单再点击拓展组件可以添加下拉菜单选项和下拉菜单选择组两种子组件,下拉菜单选择组内也可以添加下拉菜单选项,它主要是用于选项比较多时对选项进行一个分组展示。 我们可以关闭自定义选项,自己输入一些选项并用逗号分开,此时我们在下拉菜单中添加的下拉菜单和选择就都不会生效了。开启自定义选项则显示的选项就是我们添加的下拉菜单选项了。 在下拉菜单的选择选项事件下,我们可以收到一个参数选中值,就是下拉菜单当前的选择项。其它组件也可以获取下拉菜单的当前选中值。 2.通用变量 通用变量为 Object 类型的数据变量,其初始值为空对象“{ }”。通用变量是一种结构化的数据变量,用于存储具有多级结构的数据。在使用通用变量时,可以通过添加节点的方式将变量结构化,也可以通过导入JSON格式的数据,自动生成各级节点。 我们可以看一下demo中的通用变量的结构,这个通用变量本身是一个对象,对象内包含两个元素,Province和city,其中Province的属性是一个字符串,city的属性是一个数组