mint-ui之三级联动

2019年9月14日 134次阅读 来源: 蓝天海礁

现在UI盛行之际，我们变得越来越懒，身为一个渣渣前端，连最基本的轮播、瀑布流、动画等都写不动了，甚是失落。好在这些UI架子能满足产品的需求，我们尚且能活的安然。于是我随大流了。
插 ——（此文章为解决：请求市区拿对应的省市ID拿不到，若时间紧，请直接看文章结尾）
就在前端时间，cp提出要做一个类似这样的东东

《mint-ui之三级联动》
之前写的三级联动都是select标签做的，很low B的那种，做这种效果感觉麻烦好多，于是搜集UI，终于找到个合适的——mint-ui,它的picker与设计图迷之相似。这似乎没有犹豫的必要了。
于是就写啊，但是有坑啊，这是人家源码
<mt-picker :slots=”slots” @change=”onValuesChange”></mt-picker>
export default {
methods: {

onValuesChange(picker, values) {
  if (values[0] > values[1]) {
    picker.setSlotValue(1, values[0]);
  }
}

},
data() {

return {
  slots: [
    {
      flex: 1,
      values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
      className: 'slot1',
      textAlign: 'right'
    }, {
      divider: true,
      content: '-',
      className: 'slot2'
    }, {
      flex: 1,
      values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
      className: 'slot3',
      textAlign: 'left'
    }
  ]
};

}
};
感觉是不是很全，只要把values里面数据弄成活的就行(我的是请求地址信息);
当请求省的时候还好，只需把所有省的信息全部拿来展示，但是请求市和区的时候就需要
传对应的省ID和市ID了，之前想的是，给个顺序遍历，模拟做个ID就行了呗，后来发现数据库存的ID并不是顺序的，所以不能模拟ID了，只能取真的了。当时第一反应就是找这个UI，看有没有提供被选中的ID，但是无奈UI只提供了被选中的 ’值‘，此时，’值‘对应的ID需要自己去取了。于是我求救大神。

大神给我提供了一个JQ的方法
var that = this;
$(".slot1 .picker-item").each(function() {
   if($(this).hasClass("picker-selected")) {
     var check=$(this).text().replace(/\s/g,'');
     for(var i = 0; i < obj.length; i++) {
        if(check == obj[i].shengName) {                                               
           that.selectShengID=obj[i].shengID
           break;
          }
      }
  }
}
简短代码无需啰嗦，此时就拿到了对应的省ID，市ID同理可求。
论：始终觉得自己是技术里的幽默男(db男也可以?)，无论何时都不忘娱乐，放松自己。不抱怨，生活终究美好。
附：大一讲高数导数的时候很多人都懵，下面一张图很好的解释

《mint-ui之三级联动》

那就是：连续不一定可倒，但可导必然连续。(这就是高数满分的人善于发现?)
    原文作者：蓝天海礁
    原文地址: https://segmentfault.com/a/1190000011307481
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞