mint-ui picker 组件问题总结

首先看下通过mint-ui实现的三级联动效果截图


三级联动效果

问题1:关于mint-ui格式问题

官网给的数据格式是:


官网格式

但是我们在使用的时候,数据可能是接口请求返回的或者自己引入的数据。所以这里会用到computed去整理数据。


这里的this.initPD/this.initCD/ this.initXD 都是需要在created生命周期中就设定好数据,否则picker组件会因为初始化出现问题。因为initPD这些数据在data中是空的。

问题2:关于初始化picker选中返回values数组中0位为undefined的问题。


解决:


在他的组件源码中picker.vue,slotValueChange事件用于change返回values,所以在这里判断一下如果返回的数据中0位为undefined,将其设置为传入slots[0]所对应的values[0]。

基本上是解决了代码问题,因为涉及到的逻辑比较多,就不大动源码了=  = 

返回如下:



最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,076评论 25 708
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,869评论 18 139
  • 1.入门 在本文章中,将介绍如何使用 Markdown 书写文档。内容实为总结并非原创。 2. 简介 Markdo...
    sudhengshi阅读 404评论 0 2
  • 第九天分享:整理钱包后的改变 【确定卡片和钱币的固定位置】 每样东西都必须有固定的位置,整理房间的时候,如果确立了...
    娜么好玩阅读 645评论 1 3
  • 其实是这样。 不是对生活的未知而感到恐惧,也不是对前路的艰险而感到恐惧。 是对那个,很有可能要与我走过一生的陌生人...
    青城山阅读 221评论 0 1