uni-app 小程序 uni-data-picker 设置为 disabled

小程序端需要一个查看的 *** 作，不能编辑分类，需要 disabled 掉 uni-data-picker 。

官方文档 说 readonly 可以禁用，于是戚胡洞尝试：

设置 5 秒延时试试？网速慢的时候也解决不了问做祥题……

换个思路，阻止 input d出层不就ok 了?于是根据 disabled 属性加了个 disabled class ，

注： disabled 属高枯性是在 onLoad 时根据是否为编辑状态动态变化的，默认为 false （可编辑）。

ooooooh，解决！

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

1、需要引入vant-picker，需要定制一个数组，包含三级即[一级，一级内容，子类[二级，二级内容，子类[三级，三级内容]]]，如下图

2、在vant-picker的onChange事件中，对上面数组进行分级控制。

3、难点，需要把数组按三级拆分出来，放到picker的三列中，控制不好就会各种报错。

1、json，引入vant-picker

2、wxml

绑定change confirm 2个必须事件

3、js文件

3.1 定义选项内容，需要分成三级

3.2 data 中实现picker3列

3.3 onChange 事件实现

3.4 常见问题

3.4.1 最后一级斗激如果没有内容，vant-picker会报错，所以需要做一个空判断，如果为空，赋值一个常量

3.4.2 是使用value，还是选择使用自己定义的常量，需要调试伍神看。value值已经获取到了三列数据，但是容易出错。我最后还是选择使用原来定义常量proSelectList。

4.1 三级数据齐全的选择

4.2 第三级如果为空，第三列使用默认数据

参考文档：

https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

wxml

js

效果

普通选择器

多列滚纤选择器

时分秒（时间选择器）

年月日 日期选择器

省市选择器

传值问题：

微信小程序picker选择器传值

以最简单的普通培缺选择器为例

wxml

js

wxss

array: ['工作', '放假', '加班', '大中仿调休'],对应的int值分别是0,1,2,3

在实际使用中

例子

微信小程序提交form表单内容

wxml

js

css

点击完成的时候，将所有填写的值传给后端

---