实现效果
左中右三个下拉菜单分别用于选取省、市、区选项。当我们选择对应的省份时,中间的下拉菜单选项会自动变成该省对应的市,当选择某个市时,最右边的下拉菜单选项就会自动变成该市对应的区。
实现思路
利用多个下拉菜单,可以实现级联选择器的效果,来达到层层下钻的交互目的。首先我们需要把所有选项的数据都存在第一个下拉菜单中,并生成一个树状的数据结构。然后把每个子项的数据通过回调发送给下级下拉菜单,即可实现层层联动。
操作流程
第一步,先在大屏上准备三个下拉菜单。
第二步,将最左边的下拉菜单的数据修改为下面这种结构:
数据中,每一个children对象都意味着下一个下拉菜单对应的选项内容,如果不存在,则设置为 [],每一个option就是当前下拉菜单对应的选项内容。
第三步,给省、市下拉菜单添加对应的回调,用于发送children数据。
第四步,给市、区下拉菜单添加数据过滤器,分别用于接受省、市的children数据。
了解更多相关案例,可前往官网案例中心查看详情,包含智慧水利、智慧城市、智慧工厂、智慧交通等。
易知微官网
关注【官方微信公众号】,查看更多可视化资讯,海量行业demo、解决方案等你哟~
EasyV数字孪生
易知微数字孪生世界
易知微产品帮助中心