微信小程序之利用vant-picker实现三级联动

一、需求

拟设计一个设备故障状况选择器，需要三级联动，第一级：设备大类；第二级：设备细类；第三级：故障描述，如下图：

需求：三级联动图

二、业务逻辑分析

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 第三级如果为空，第三列使用默认数据