mint-ui picker 三级联动实现

使用这个插件遇到几个问题总结一下。

问题一 mint-ui picker defaultIndex修改设置默认值设置不了

按照官网的例子 http://mint-ui.github.io/docs/#/zh-cn2/picker, 然后使用 defaultIndex 发现怎么修改默认值都不会变。

解决方案:

在data() 实例对象里面声明的时候,就需要添加 defaultIndex属性值。o(╥﹏╥)o

问题二 设置默认值问题,初次进入设置 北京市-市辖区-东城区 设置无效。

除了北京市之外的其它省都可以设置,唯独北京市的设置无效,是在初始化的时候,Onchangevalue 并没有检测到变化,所以设置不成功。

解决方案

初始化时,先对每一个slot的vaules赋值,然后设置 defaultIndex 值即可。

代码

this.slots[0].values = Object.keys(myaddress);
this.slots[2].values = Object.keys(myaddress[this.province]);
this.slots[4].values = Object.keys(myaddress[this.province][this.city]);

然后在设置对应的defaultIndex

详细代码以及效果预览

https://codesandbox.io/s/vue-three-level-linkage-3kw9f

打赏一个呗

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦