mint-ui之三级联动

坍缩重载
• 阅读 4825

现在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之三级联动

那就是:连续不一定可倒,但可导必然连续。(这就是高数满分的人善于发现?)

点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Wesley13 Wesley13
3年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
皕杰报表(关于日期时间时分秒显示不出来)
在使用皕杰报表设计器时,数据据里面是日期型,但当你web预览时候,发现有日期时间类型的数据时分秒显示不出来,只有年月日能显示出来,时分秒显示为0:00:00。1.可以使用tochar解决,数据集用selecttochar(flowdate,"yyyyMMddHH:mm:ss")fromtablename2.也可以把数据库日期类型date改成timestamp
Wesley13 Wesley13
3年前
mysql中时间比较的实现
MySql中时间比较的实现unix\_timestamp()unix\_timestamp函数可以接受一个参数,也可以不使用参数。它的返回值是一个无符号的整数。不使用参数,它返回自1970年1月1日0时0分0秒到现在所经过的秒数,如果使用参数,参数的类型为时间类型或者时间类型的字符串表示,则是从1970010100:00:0
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Easter79 Easter79
3年前
TurnipBit开发板DIY呼吸的吃豆人教程实例
  转载请以链接形式注明文章来源(MicroPythonQQ技术交流群:157816561,公众号:MicroPython玩家汇)  0x00前言  吃豆人是耳熟能详的可爱形象,如今我们的TurnipBit也集成了这可爱的图形,我们这就让他来呼吸了~。  0x01效果展示  先一起看下最终的成品演示视频:  http:/
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0