一、需求
拟设计一个设备故障状况选择器，需要三级联动，第一级：设备大类；第二级：设备细类；第三级：故障描述，如下图：
需求：三级联动图
二、业务逻辑分析
1、需要引入vant-picker，需要定制一个数组，包含三级即[一级，一级内容，子类[二级，二级内容，子类[三级，三级内容]]]，如下图
数组示例
2、在vant-picker的onChange事件中，对上面数组进行分级控制。
3、难点，需要把数组按三级拆分出来，放到picker的三列中，控制不好就会各种报错。
三、代码设计
1、json，引入vant-picker
json文件
2、wxml
绑定change confirm 2个必须事件
wxml
3、js文件
3.1 定义选项内容，需要分成三级
定义选择项
3.2 data 中实现picker3列
picker三列
3.3 onChange 事件实现
onChange事件
3.4 常见问题
3.4.1 最后一级如果没有内容，vant-picker会报错，所以需要做一个空判断，如果为空，赋值一个常量
常量
为空处理
3.4.2 是使用value，还是选择使用自己定义的常量，需要调试看。value值已经获取到了三列数据，但是容易出错。我最后还是选择使用原来定义常量proSelectList。
value值
四、使用效果
4.1 三级数据齐全的选择
正常使用
4.2 第三级如果为空，第三列使用默认数据
网友评论