精华内容
下载资源
问答
  • 下拉框的联动是我们开发中经常遇到一种情况。比如一个学生管理系统中,根据年级、科目及姓名查询学生考试成绩,年级和科目都是硬盘中的有限数据(数据库)而学生则可以有用户手动指定,这时在数据库中有年级和...

    下拉框的两级联动是我们开发中经常遇到一种情况。比如一个学生管理系统中,根据年级、科目及姓名查询学生考试成绩,年级和科目都是硬盘中的有限数据(数据库)而学生则可以有用户手动指定,这时在数据库中有年级和科目两张表,每门科目都对应一个年级,所以我们可以用两个下拉框(Combobox)来存储年级和科目信息来供用户选择。界面如下:

    image

    这时如果我们将科目对应的下拉框直接绑定科目表时,用户选择一个年级后还要从所有科目中进行选择就会降低系统的友好性,甚至可能出现没有任何意义的查询语句。我们可以先绑定年级下拉框的数据。在年级下拉框中的SelectedIndexChange事件中获取年级下拉框中的数据(编号)在用得到的数据(年级编号)去查科目表,将对应的科目信息绑定到科目下拉框。

     
    model展开1 int gradeid = Convert.ToInt32(cboGrade.SelectedValue);//获取选定的年级编号 2 3 List list= subjectBll.GetAllSubject(gradeid);//查询指定年继编号下对应的科目信息 4 //绑定科目下拉框 5 cboSubject.ValueMember = "subjectid"; 6 cboSubject.DisplayMember = "subjectname"; 7 cboSubject.DataSource = list; 
    返回顶部收缩  1 int gradeid = Convert.ToInt32(cboGrade.SelectedValue);//获取选定的年级编号
      2 
      3 List <Subject> list= subjectBll.GetAllSubject(gradeid);//查询指定年继编号下对应的科目信息 
      4     //绑定科目下拉框 
      5 cboSubject.ValueMember = "subjectid";
      6 cboSubject.DisplayMember = "subjectname";
      7 cboSubject.DataSource = list;
     

    下拉框的SelectedValue属性

    属性原型:image

    常见错误:image

    错误分析:经过实验可以确认将绑定数据源的代码放在属性设置的后边是可以解决这个错误的,个人觉得是如果先绑定数据源的话系统会自动将valuemember的属性值设置为绑定的集合的类型之后再设置Valuemember时系统不会再对其进行更改!

    转载于:https://www.cnblogs.com/wangzheand/p/5346911.html

    展开全文
  • 最近因为项目需求,需要一个筛选功能,由于技术有限,搞了天也没搞出来,最后还是在一位大神的帮助下实现了这个功能,防止时间长了忘记,在这里记录一下。一. html/css代码 .select{ width:100%; height:40px; ...

    最近因为项目需求,需要一个筛选功能,由于技术有限,搞了两天也没搞出来,最后还是在一位大神的帮助下实现了这个功能,防止时间长了忘记,在这里记录一下。

    一. html/css代码
    
    <style>
        .select{
            width:100%;
            height:40px;
            line-height: 40px;
            text-align:center;
            background:#fff;
            border-bottom: 1px solid #e6e6e6;
            position:fixed;
            z-index: 15;
            }
        .select ul li{
                float:left;
                width:33.1%;
                height:40px;
                color: #8f8f8f;
                text-align: center;
                border-right:1px solid #e6e6e6;
            }
        .select ul li:last-child{
                border-right:none;
            }
        .select ul li span{
                width:15px;
                height:15px;
                display:inline-block;
                position:relative;
                top: 2px;
                left: 2px;
                background:url(img/xiala.png) no-repeat center;
                background-size: 12px;
            }
        .select_con{
                width: 100%;
                height: 100%;
                position: fixed;
                bottom: 0px;
                z-index: 10;
                background: rgba(0,0,0,.5);
                display: none;
                top: 81px;
            }
        .tab_con{
                width: 100%;
                float: left;
                z-index: 999;
                min-height: 40px;
                position: relative;
            }
        .select_con ul li{
                height:40px;
                line-height:40px;
                text-align:left;
                text-indent:20px;
                border-bottom:1px solid #e6e6e6;
            }
        .select_con_left{
                width:50%;
                max-height: 328px;
                float:left;
                background:#FFF;
                overflow:scroll;
            }
        .select_con_middle{
                width:100%;
                max-height: 328px;
                background:#FFF;
                overflow:scroll;
            }
        .select_con_right{
                width:50%;
                max-height: 328px;
                float:left;
                background:#f2f2f2;
                overflow:scroll;
            }
            .select_con_middle ul li.active{background:#eaeaea;}
        </style>
        <div class="select">
            <ul id="tabs">
                <li>{if !$CAT['catname']}全部分类{else}<font color="red">{$CAT['catname']}</font>{/if}<span></span></li>
                <li>{if !$areaname}所在地区{else}<font color="red">{$areaname}</font>{/if}<span></span></li>
                <li>{if $ods == 1}最新发布{elseif $ods == 2}最近活动{elseif $ods == 3}人气最高{/if}<span></span></li>
            </ul>
        </div>
        <div class="select_con" id="tab_conbox">
            <div class="tab_con" >
                <div class="select_con_middle">
                    <ul class="select_con_left catsss">
                        <li data-arid="0" class="area_v {if !$catid}active{/if}" data-type="cat">全部</li>
                        {loop $catids $v}
                        <li data-arid="{$v[catid]}" class="area_v {if $catid == $v[catid]}active{/if}" data-type="cat">{$v[catname]}</li>
                        {/loop}
                    </ul>
                    <ul class="select_con_right" id="cat_right_0">
                        <li><a href="/mobile/index.php?moduleid=8&catid=376">全部</a></li>                        
                    </ul>
                    {loop $catids $v}
                    <ul class="select_con_right" id="cat_right_{$v[catid]}">
                        {loop $v[child] $c}
                        <li data-arid="{$c[catid]}" data-type="cat">{$c[catname]}</li>
                        {/loop}                             
                    </ul>
                    {/loop}
                </div>
            </div>
            <div class="tab_con" >
                <div class="select_con_middle">
                    <ul class="select_con_left">
                        {if $sarea}
                            <li data-arid="0" class="area_v {if !$areaid}active{/if}" data-type="area">全部</li>
                            {loop $sarea $v}
                                <li value="{$v[areaid]}" class="area_v {if $areaid == $v[areaid]}active{/if}" data-arid="{$v[areaid]}" data-type="area" >{$v[areaname]}</li>
                            {/loop}
                        {/if}                       
                    </ul>
                    {if $sarea}
                    <ul class="select_con_right" id="area_right_0">
                        <li><a href="/mobile/index.php?moduleid=8&catid=376">全部</a></li>                        
                    </ul>
                    {loop $sarea $v}
                    <ul class="select_con_right" id="area_right_{$v[areaid]}">
                        {loop $v[child] $c}
                            <li data-arid="{$c[areaid]}" data-type="area" >{$c[areaname]}</li> 
                        {/loop}
                    </ul>
                    {/loop}
                    {/if}
    
                </div>
            </div>
            <div class="tab_con" >
                <div class="select_con_middle">
                    <ul>
                        <li data-arid="1" data-type="ods" class="ods_sly {if $ods == 1}active{/if}">最新发布</li>
                        <li data-arid="2" data-type="ods" class="ods_sly {if $ods == 2}active{/if}">最近活动</li>
                        <li data-arid="3" data-type="ods" class="ods_sly {if $ods == 3}active{/if}">人气最高</li>                              
                    </ul>
                </div>
            </div>
        </div>
    
    二.js代码
    
        <!-- 多级筛选功能 by F-->
    <script>
        $(function(){
            $('.select_con_right').hide();
            $('ul.select_con_left li.area_v').click(function(){
                var areaid =  $(this).data('arid'); 
                var ttt = $(this).data('type');
                $('.select_con_right').hide();
                if(ttt == 'cat'){
                    $('#cat_right_'+areaid).show();
                    if($('#cat_right_'+areaid+' li').size() < 1){
                        gotoUrl(areaid, ttt);
                    }
                }else{
                    $('#area_right_'+areaid).show();
                    if($('#area_right_'+areaid+' li').size() < 1){
                        gotoUrl(areaid, ttt);
                    }
                }
    
            });
            // tj
            $('ul.select_con_right li').click(function(){
                var areaid =  $(this).data('arid'); 
                var ttt = $(this).data('type');
                gotoUrl(areaid, ttt);
            });
            // order
            $('.ods_sly').click(function(){ 
                var areaid =  $(this).data('arid'); 
                var ttt = 'ods'; 
                gotoUrl(areaid, ttt);
            });
        });
        function gotoUrl(areaid, ttt){
            var cid = {$catid};
            var aid = {$areaid};
            var ods = {$ods};
            //ods = ods ? ods : 1;
            if(ttt == 'cat'){
                cid = areaid;
            }else if(ttt == 'area'){
                aid = areaid;
            }else{
                ods = areaid;
            }
            window.location.href="/mobile/index.php?moduleid=8&catid="+cid+"&areaid="+aid+"&ods="+ods;
        }
    </script>
    <script>
        <!-- 下拉特效 -->
        $('.select li').click(function(){
            $('.select_con').fadeIn(100);
            $('.tab_con').slideDown(100);
        });
        $('.select_con').click(function(){
            $('.select_con').fadeOut(100);
            $('.tab_con').slideUp(100);
        });
        $('.tab_con').click(function(f){
            f.stopPropagation();
        });
        <!-- 下拉隐藏显示 -->
        $(document).ready(function() {
            jQuery.ftab = function(tab_title,tab_conbox,shijian) {
                $(tab_title).find("li:first").addClass("thistab").show(); 
                $(tab_conbox).find("li:first").show();
    
                $(tab_title).find("li").bind(shijian,function(){
                  $(this).addClass("thistab").siblings("li").removeClass("thistab"); 
                    var activeindex = $(tab_title).find("li").index(this);
                    $(tab_conbox).children().eq(activeindex).show().siblings().hide();
                    return false;
                });
    
            };
            $.ftab("#tabs","#tab_conbox","click");
        });
    </script>
    <!-- 多级筛选功能 by F  END-->
    
    
    
    三.php代码
    
        // 查询检索分类
        $catids = array();
        if($catid == 376){
            $res = $db->query("SELECT catid,catname FROM category WHERE moduleid = 8 AND parentid = 376");
        }else{
            $res = $db->query("SELECT catid,catname FROM category WHERE moduleid = 8 AND parentid = 0 AND catid <> 376");
        }
        while ($r = $db->fetch_array($res)) {
            $catids[] = $r;
        }
        foreach($catids as $k => $v){
            $temp = array();
            $res = $db->query("SELECT catid,catname FROM category WHERE moduleid = 8 AND parentid = ".$v['catid']);
            while ($r = $db->fetch_array($res)) {
                $temp[] = $r;
            }
            $catids[$k]['child'] = $temp;
        } 
    
        // 查询检索地区
        $sarea = array();
        $area = $db->query("SELECT areaid,areaname FROM area WHERE parentid = 0");
        while ($res = $db->fetch_array($area)) {
            $sarea[] = $res;
        }
        foreach($sarea as $k => $v){
            $temp = array();
            $res = $db->query("SELECT areaid,areaname FROM area WHERE parentid = ".$v['areaid']);
            while ($r = $db->fetch_array($res)) {
                $temp[] = $r;
            }
            $sarea[$k]['child'] = $temp;
        } 
    

    效果图:
    这里写图片描述
    这里写图片描述

    展开全文
  • 源码传送: Rain120/vue-study 之前在外卖软件上看到这个左右联动的效果,觉得很有意思,所以就尝试使用 Vue 来实现,将这个联动抽离成为一个单独的组件,废话少说,先来一张效果图。 这个组件分为个部分,1、...
  • Vue实现左右菜单联动实现

    千次阅读 2018-08-11 10:10:44
    之前在外卖软件上看到这个左右联动的效果,觉得很有意思,所以就尝试使用Vue来实现,将这个联动抽离成为一个单独的组件,废话少说,先来一张效果图。 这个组件分为个部分,1、左菜单;2、右菜单。 动态数据结构 ...
        

    知乎

    个人博客

    Github

    源码传送门:Rain120/vue-study

    根据掘金评论需求,更新了数据接口并修复了一些问题

    之前在外卖软件上看到这个左右联动的效果,觉得很有意思,所以就尝试使用Vue来实现,将这个联动抽离成为一个单独的组件,废话少说,先来一张效果图。

    Vue实现左右菜单联动效果图

    这个组件分为两个部分,1、左菜单;2、右菜单。

    动态数据结构
    动态数据结构

    menus: [
      {
        name: '菜单1',
        data: [
          {
            name: '1.1'
          },
          {
            name: '1.2'
          },
          {
            name: '1.3'
          },
          {
            name: '1.4'
          },
          {
            name: '1.5'
          },
          {
            name: '1.6'
          }
        ]
      }
    ]

    data数据是用户自定义增加一些内容,并渲染DOM

    左菜单的DOM结构

    <scroll
      class="left-menu"
      :data="menus"
      ref="leftMenu">
      <div class="left-menu-container">
        <ul>
          <li
            class="left-item"
            ref="leftItem"
            :class="{'current': currentIndex === index}"
            @click="selectLeft(index, $event)"
            v-for="(menu, index) in menus"
            :key="index">
            <p class="text">{{menu.name}}</p>
          </li>
        </ul>
      </div>
    </scroll>

    右菜单的DOM结构

    <scroll
      class="right-menu"
      :data="menus" 
      ref="rightMenu"
      @scroll="scrollHeight"
      :listenScroll="true"
      :probeType="3">
      <div class="right-menu-container">
        <ul>
          <li class="right-item" ref="rightItem" v-for="(menu, i) in menus" :key="i">
            <div class="title">{{menu.name}}</div>
            <ul>
              <li v-for="(item, j) in menu.data" :key="j">
                <div class="data-wrapper">
                  <div class="data">{{item.name}}</div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </scroll>

    这里是为了做demo,所以在数据上只是单纯捏造。

    当然因为这是个子组件,我们将通过父组件传递props,所以定义props

    props: {
        menus: {
          required: true,
          type: Array,
          default () {
            return []
          }
        }
      },

    原理图

    在这个业务场景中,我们的实现方式是根据右边菜单滚动的高度来计算左边菜单的位置,当然左边菜单也可以通过点击来确定右边菜单需要滚动多高的距离,那么我们如何获得该容器滚动的距离呢?
    之前一直在使用better-scroll,通过阅读文档,我们知道它有有scroll事件,我们可以通过监听这个事件来获取滚动的pos
    scroll事件

    if (this.listenScroll) {
      let me = this
      this.scroll.on('scroll', (pos) => {
        me.$emit('scroll', pos)
      })
    }

    所以我们在右边菜单的scroll组件上监听scroll事件

    @scroll="scrollHeight"

    method

    scrollHeight (pos) {
      console.log(pos);
      this.scrollY = Math.abs(Math.round(pos.y))
    },

    我们将监听得到的pos打出来看看
    监听scroll事件,得到pos

    我们可以看到控制台打出了当前滚动的pos信息,因为在移动端开发时,坐标轴和我们数学中的坐标轴相反,所以上滑时y轴的值是负数

    移动开发坐标轴

    所以我们要得到每一块li的高度,我们可以通过拿到他们的DOM

     _calculateHeight() {
      let lis = this.$refs.rightItem;
      let height = 0
      this.rightHeight.push(height)
      Array.prototype.slice.call(lis).forEach(li => {
        height += li.clientHeight
        this.rightHeight.push(height)
      })
    console.log(this.rightHeight)
    }

    我们在created这个hook之后调用这个计算高度的函数

     _calculateHeight() {
      let lis = this.$refs.rightItem;
      let height = 0
      this.rightHeight.push(height)
      Array.prototype.slice.call(lis).forEach(li => {
        height += li.clientHeight
        this.rightHeight.push(height)
      })
      console.log(this.rightHeight)
    }

    得到右边菜单高度

    当用户在滚动时,我们需要计算当前滚动距离实在那个区间内,并拿到他的index

    找到滚动位置对应的index
    找到滚动位置对应的index

    computed: {
      currentIndex () {
        const { scrollY, rightHeight } = this
        const index = rightHeight.findIndex((height, index) => {
          return scrollY >= rightHeight[index] && scrollY < rightHeight[index + 1]
        })
        return index > 0 ? index : 0
      }
    }

    所以当前应该是左边菜单index = 1的菜单项active
    以上是左边菜单根据右边菜单的滑动联动的实现,用户也可以通过点击左边菜单来实现右边菜单的联动,此时,我们给菜单项加上click事件

    @click="selectLeft(index, $event)"

    这里加上$event是为了区分原生点击事件还是better-scroll派发的事件

    selectLeft (index, event) {
      if (!event._constructed) {
        return
      }
      let rightItem = this.$refs.rightItem
      let el = rightItem[index]
      this.$refs.rightMenu.scrollToElement(el, 300)
    },

    使用

    <cascad-menu :menus="menus"></cascad-menu>

    到这里我们就基本上完成了这些需求了

    展开全文
  • 本文介绍了微信小程序三级联动地址选择器的实例代码,分享给大家,有需要的可以一起了解一下 在一些电商类的小程序中,地址选择这个功能一般是必备的,一般的收货信息都需要有一个能选择省市县的控件,当然也有些人...
  • 移动端实现三级联动 mint-ui api传送 官网链接 npm 安装 npm i mint-ui -S 引入 Mint UI 分种形式: 一是完全引入,具体实现方式 在 main.js 写入以下代码: 重要:样式文件需要单独引入 import Vue from 'vue'...

    移动端实现三级联动

    mint-ui api传送门 官网链接
    npm 安装

    npm i mint-ui -S
    

    引入 Mint UI 分两种形式:
    一是完全引入,具体实现方式 在 main.js 写入以下代码:
    重要:样式文件需要单独引入

    import Vue from 'vue'
    import MintUI from 'mint-ui'
    import 'mint-ui/lib/style.css'
    import App from './App.vue'
    
    Vue.use(MintUI)
    
    new Vue({
      el: '#app',
      components: { App }
    })
    

    二是按需引入:
    以Toast, Picker,Field组件为例,vue组件注入

    //main.js:
    import Vue from 'vue'
    import App from './App.vue'
    import { Toast, Picker,Field} from 'mint-ui';
    Vue.prototype.$toast = Toast;//vue的原型添加Toast,在任何地方使用this.$toast 都可以使用Toast 功能
    Vue.component(Picker.name,Picker); 
    Vue.component(Field.name, Field);
    new Vue({
      el: '#app',
      components: { App }
    })
    //vue页面引用:
    <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
    

    项目页面使用:
    首先看下实现效果图:
    总共用了三个picker组件,在拨动省组件的时候,市组件会根据省数据联动,区数据会根据市数据联动。(由于我不会贴gif,所以迁就看看吧。)
    在这里插入图片描述
    这里我把模态框独自封装成了一个子组件mocPicker.vue,又涉及到了父子组件传值的问题,我就不多加赘述。具体代码实现,我会贴出来。
    html 部分:

    <template>
        <div class="mocPicker">
            <div class="mask" @click.self="_hideLinkage">
                <div class=" linkage">
                    <h2>请选择所在地区</h2>
                    <div class="linkPageMine clearfix">
                        <div class="province pickerWrapper">
                            <mt-picker :slots="provinces" @change="onProvinceChange" value-key="city_name"></mt-picker>
                        </div>
                        <div class="city pickerWrapper">
                            <mt-picker :slots="citys" @change="onCityChange" value-key="city_name"></mt-picker>
                        </div>
                        <div class="area pickerWrapper">
                            <mt-picker :slots="areas" @change="onAreaChange" value-key="city_name"></mt-picker>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
    

    js部分:

    <script>
    export default {
        name:'mocPicker',
        props:{
            provinceVal: String,
            cityVal: String,
            districtVal: String,
        },
        computed: {
            result() {
                return {
                    province: this.province.city_name,
                    city: this.city.city_name,
                    district: this.area.city_name,
                    provinceId:this.province.city_code,
                    cityId: this.city.city_code,
                    districtId: this.area.city_code,
                }
            }
        },
        data(){
            return{
                CITY_DATA:[],
                province:{
                    city_name: this.provinceVal,
                    city_code:'110000'
                },
                maskFlag:false,
                city:{
                    city_name:this.cityVal,
                    city_code:'110100'
                },
                area:{
                    city_name:this.districtVal,
                    city_code:'110101'
                },
                flag:0, //最开始省市区那三个picker会初始化调用change事件,但是此时没有省市区数据,因此会报错,
                        //所以以这个标识符来控制当时第一次初始化时调用change事件时直接return
                provinces: [
                    {
                        flex: 1,
                        values: [],
                        className: 'slot1',
                        textAlign: 'center'
                    }, {
                        divider: true,
                        content: '-',
                        className: 'right'
                    }
                ],
                citys: [
                    {
                        flex: 1,
                        values: [],
                        className: 'slot1',
                        textAlign: 'center'
                    }, {
                        divider: true,
                        content: '-',
                        className: 'slot2'
                    }
                ],
                areas: [
                    {
                        flex: 1,
                        values: [],
                        className: 'slot1',
                        textAlign: 'center'
                    }
                ]
            }
        },
        created(){
            this.CITY_DATA = JSON.parse(decodeURIComponent(localStorage.getItem('regionInfo')));
            this.provinces[0].values = this._getProvince();
            this.citys[0].values = this._getCity('110000');
            this.areas[0].values = this._getArea('110000','110100');
        },
        methods:{
            _hideLinkage(){
                this.$emit('getLinkage',this.result,false); //触发父组件的getLinkage事件接收结果数据
            },
            onProvinceChange(picker, values) {
                if(this.flag===0){
                    return
                }
                let provinceIndex=picker.getSlotValue(0)
                this.province=provinceIndex
                let city=this._getCity(this.province.city_code)
                this.citys[0].values=city
                this.city=city[0]
            },
            onCityChange(picker, values) {
                if(this.flag===0){
                    return
                }
                let cityIndex=picker.getSlotValue(0);
                this.city=cityIndex
                let provinceIndex=this.province
                let area=this._getArea(this.province.city_code, this.city.city_code)
                this.areas[0].values=area
                this.area=area[0]
            },
            onAreaChange(picker, values) {
                if(this.flag===0){
                    this.flag=1
                    return
                }
                let areaIndex=picker.getSlotValue(0)
                this.area=areaIndex
            },
             //得到省份数据
            _getProvince(){
                let province=[]
                this.CITY_DATA.forEach(function(item,index){
                    let obj={}
                    obj.city_code=item.city_code
                    obj.city_name=item.city_name
                    province.push(obj)
                })
                return province
            },
            //根据省份得到城市数据
            _getCity(provinceId){
                let city=[]
                this.CITY_DATA.forEach((item,index)=>{
                    if(item.city_code === provinceId){
                        item.cities.forEach((item,index)=>{
                            let obj={}
                            obj.city_code=item.city_code
                            obj.city_name=item.city_name
                            city.push(obj)
                        })
                    }
                })
                return city
            },
            //根据城市和省份得到区域数据
            _getArea(provinceId,cityId){
                let area=[]
                this.CITY_DATA.forEach((item,index)=>{
                    if(item.city_code === provinceId){
                        item.cities.forEach((item,index)=>{
                            if(item.city_code === cityId){
                                item.regions.forEach((item)=>{
                                    let obj={}
                                    obj.city_code=item.city_code
                                    obj.city_name=item.city_name
                                    area.push(obj)
                                })
                            }
                        })
                    }
                })
                if(area.length==0){ //如果没有区域数据则第三个picker显示的内容
                        area.push({
                        city_name:'没有',
                        city_code:'000000'
                    })
                }
                return area
            }
        }
    }
    
    </script>
    

    css部分:

    <style lang="stylus" scoped>
    >>>.picker-slot
        font-size: 30px;
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    .mask
        position: fixed;
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index:11;
    .linkage
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 50%;
        background: #fff;
        left: 0;
        border-radius: 10px 10px 0 0;
        h2 
            font-size: 32px;
            font-weight: bold;
            padding: 40px 20px;
            text-indent: 1em;
        .linkPageMine
            margin: 50px auto;
            margin-top: 0;
            padding: 30px 0;
            .pickerWrapper
                width:33.3%;
                float: left;
    </style>
    

    数据格式,以天津为例:

    //具体数据格式,
    {
       "city_name":"天津市",
        "cities":[
            {
                "city_name":"天津市",
                "regions":[
                    {
                        "city_name":"和平区",
                        "city_pinyin":"hepingqu",
                        "sheng_code":"12",
                        "qu_code":"01",
                        "city_code":"120101",
                        "type":2,
                        "shi_code":"01"
                    },
                    {
                        "city_name":"河东区",
                        "city_pinyin":"hedongqu",
                        "sheng_code":"12",
                        "qu_code":"02",
                        "city_code":"120102",
                        "type":2,
                        "shi_code":"01"
                    },
                    {
                        "city_name":"河西区",
                        "city_pinyin":"hexiqu",
                        "sheng_code":"12",
                        "qu_code":"03",
                        "city_code":"120103",
                        "type":2,
                        "shi_code":"01"
                    },
                    {
                        "city_name":"南开区",
                        "city_pinyin":"nankaiqu",
                        "sheng_code":"12",
                        "qu_code":"04",
                        "city_code":"120104",
                        "type":2,
                        "shi_code":"01"
                    },
                    {
                        "city_name":"河北区",
                        "city_pinyin":"hebeiqu",
                        "sheng_code":"12",
                        "qu_code":"05",
                        "city_code":"120105",
                        "type":2,
                        "shi_code":"01"
                    },
                    {
                        "city_name":"红桥区",
                        "city_pinyin":"hongqiaoqu",
                        "sheng_code":"12",
                        "qu_code":"06",
                        "city_code":"120106",
                        "type":2,
                        "shi_code":"01"
                    },
                    {
                        "city_name":"东丽区",
                        "city_pinyin":"dongliqu",
                        "sheng_code":"12",
                        "qu_code":"10",
                        "city_code":"120110",
                        "type":2,
                        "shi_code":"01"
                    },
                    {
                        "city_name":"西青区",
                        "city_pinyin":"xiqingqu",
                        "sheng_code":"12",
                        "qu_code":"11",
                        "city_code":"120111",
                        "type":2,
                        "shi_code":"01"
                    },
                    {
                        "city_name":"津南区",
                        "city_pinyin":"jinnanqu",
                        "sheng_code":"12",
                        "qu_code":"12",
                        "city_code":"120112",
                        "type":2,
                        "shi_code":"01"
                    },
                    {
                        "city_name":"北辰区",
                        "city_pinyin":"beichenqu",
                        "sheng_code":"12",
                        "qu_code":"13",
                        "city_code":"120113",
                        "type":2,
                        "shi_code":"01"
                    },
                    {
                        "city_name":"武清区",
                        "city_pinyin":"wuqingqu",
                        "sheng_code":"12",
                        "qu_code":"14",
                        "city_code":"120114",
                        "type":2,
                        "shi_code":"01"
                    },
                    {
                        "city_name":"宝坻区",
                        "city_pinyin":"baochiqu",
                        "sheng_code":"12",
                        "qu_code":"15",
                        "city_code":"120115",
                        "type":2,
                        "shi_code":"01"
                    },
                    {
                        "city_name":"滨海新区",
                        "city_pinyin":"binhaixinqu",
                        "sheng_code":"12",
                        "qu_code":"16",
                        "city_code":"120116",
                        "type":2,
                        "shi_code":"01"
                    },
                    {
                        "city_name":"宁河区",
                        "city_pinyin":"ninghequ",
                        "sheng_code":"12",
                        "qu_code":"17",
                        "city_code":"120117",
                        "type":2,
                        "shi_code":"01"
                    },
                    {
                        "city_name":"静海区",
                        "city_pinyin":"jinghaiqu",
                        "sheng_code":"12",
                        "qu_code":"18",
                        "city_code":"120118",
                        "type":2,
                        "shi_code":"01"
                    },
                    {
                        "city_name":"蓟州区",
                        "city_pinyin":"jizhouqu",
                        "sheng_code":"12",
                        "qu_code":"19",
                        "city_code":"120119",
                        "type":2,
                        "shi_code":"01"
                    }
                ],
                "city_pinyin":"tianjinshi",
                "sheng_code":"12",
                "qu_code":"00",
                "city_code":"120100",
                "type":1,
                "shi_code":"01"
            }
        ],
        "city_pinyin":"tianjinshi",
        "sheng_code":"12",
        "qu_code":"00",
        "city_code":"120000",
        "type":0,
        "shi_code":"00"
    },
    

    父组件引用mocPicker.vue,由于省市区数据太多,我们项目设定市不定期更新,每次请求服务端会返回一个时间戳,前端记录下来并下次请求时将时间戳回传给服务端以此来判断用不用刷新存在localstorage里的省市区数据,来优化用户体验。

    // js
    import Linkage from './components/mocPicker'
    export default {
        components:{
            Linkage,
        },
         data() {
            return {
                province: '',
                city: '',
                district: '',
                mocPickerShow:false,//模态框初始化默认关闭
            }
        },
        methods: {
            // picker组件显示隐藏
            navSeach() {
                this.mocPickerShow = true;
                this.setRegionInfo();
            },
            // 是否更新省市区数据
            setRegionInfo(){
                var lastDistrictVersion = localStorage.getItem('lastDistrictVersion');
                this.$http.get(urlList.getConfiguration+'?lastDistrictVersion='+ lastDistrictVersion).then(res=>{
                    if(res.data.code== '200'){
                        var res= res.data.data;
                        this.isNeedUpdate = res.isNeedUpdate;
                        if(this.isNeedUpdate == '1'){
                            this.getRegionInfo();
                        }else{
                            return
                        }
                    }
                })
            },
            // 请求省市区三级联动json 
            getRegionInfo(){
                this.$http.get(urlList.regionInfo).then(res=>{
                    var res = res.data.data;
                    this.lastDistrictVersion = res.districtVersion+'';
                    localStorage.setItem('lastDistrictVersion',encodeURIComponent(JSON.stringify(res.districtVersion)))
                    localStorage.setItem('regionInfo',encodeURIComponent(JSON.stringify(res.areaInfo)))
                })
            },
            // picker关闭后回传数据
            getLinkage(val,state){
                this.mocPickerShow = state;
                this.province = val.province,
                this.city = val.city,
                this.cityCode = val.districtId;
                this.district = val.district,
                this.addval = this.province +  this.city + this.district ;
            },
        }
    }
    //html
    <Linkage v-show="mocPickerShow" 
      @getLinkage="getLinkage"
       :provinceVal="province"
       :cityVal="city"
       :districtVal="district"
    ></Linkage>
    

    记:mint-ui 框架定义好的样式,不能随意更改 。如果想要自定义某些样式,style标签不能设置 scoped,否则样式不会生效。

    展开全文
  • 但有时候我们有自己的特殊需求,也想做到自定义的联动关系,比如我希望两面墙的总长度是固定的,增加一面墙长度之后,另外一面墙会跟着缩减。又或者,链接文档的某个构件移动了,希望主文件的某个不相关的构件也移动...
  • 本文介绍了Github源码传送: Rain120/之前在外卖软件上看到这个左右联动的效果,觉得很有意思,所以就尝试使用这个组件分为个部分,1、左菜单;2、右菜单。 左菜单的 DOM 结构class="left-menu":data="leftMenu...
  • Excel情报局生产搬运分享Excel基础技能OFFICE知识文艺青年用1%的Excel基础搞定99%的日常工作做一个有文艺范的Excel公众号Excel是手艺玩转需要勇气表哥带你玩转办公室有温度的公众号听歌阅读2020年7月16日周四好!...
  • 它的个触点(或称触头)与节气联动,一个触点可在电阻上滑动,利用电阻的变化将节气位置信号转换成电压值 VTA。这个电压呈线性变化,所以传感器叫做线性输出型节气位置传感器。根据这个线性电压值,ECU可...
  • Excel情报局生产搬运分享Excel基础技能OFFICE知识新青年用1%的Excel基础搞定99%的日常工作做一个有文艺范的Excel公众号Excel是手艺玩转需要勇气听歌阅读在日常的Excel使用过程中,对于数据的录入有种方法,一种...
  • 它的个触点(或称触头)与节气联动,一个触点可在电阻上滑动,利用电阻的变化将节气位置信号转换成电压值 VTA。这个电压呈线性变化,所以传感器叫做线性输出型节气位置传感器。根据这个线性电压值,ECU可...
  • 一 相关规范标准GB29364-2012《防火监控器》和GB...应由常开防火所在防火分区内的只独立的火灾探测器或一只火灾探测器与一只手动火灾报警按钮的报警信号,作为常开防火关闭的联动触发信号,联动触发信号...
  • QY-DT19电梯轿厢安装与调试实训设备适用于职业院校、中职院校电梯技术专业学员进行电梯轿厢的安装调整实训,主要由实训架、轿厢、门机驱动系统、安全防护装置等部分组成,厅安装在条平行的导轨上,可手动...
  • Excel情报局生产搬运分享Excel基础技能Excel知识青年用1%的Excel基础搞定99%的日常工作做一个有文艺范的Excel公众号Excel是手艺玩转需要勇气Excel情报局推荐音乐,阅读文章更轻松在日常的Excel使用过程中,对于...
  • 其实这次入手小米米家吸顶灯主要是因为走廊的欧普灯挂掉了,本想随便入手一个替换的得了,但是看到小米的智能吸顶灯才249,比灯具城里杂牌子的都便宜,加上还能和家里的设备联动、小爱同学语音控制,实在是太香了。...
  • [乐意黎原创] 手动挡驾驶技巧

    千次阅读 2014-09-18 15:21:22
    手动挡驾驶技巧:喜欢开手动挡车,因为个原因,一是换来换去,有驾驶乐趣;二是比较省油。下面分享几点手动挡车驾驶的技巧。 一、起步技巧。不同于自动挡车,手动挡车起步时,左脚把离合器踩到底,挂一档,右脚...
  • 门禁说明书

    2015-01-12 22:41:27
     与电脑门禁管理软件通讯:有RS485联网和TCP/IP网络种通讯方式,RS485联网通讯时默认波特率为9600; 通行模式  刷卡开门;  刷卡 + 用户密码 开门(带键盘读卡器);  ID(为用户标识且取后四位数字)+ 四...
  • TFmini 激光雷达作为探测电梯开关状态的传感器可内嵌于投影仪内,实时探测电梯开关状态并根据状态输出相关信号,从而控制投影仪联动。 二、 应用原理 电梯关闭与开启时,TFmini 从电梯轿厢内侧可以测得距离...
  • 电梯调度算法设计

    2021-03-03 17:19:01
    电梯调度算法设计 题目:电梯调度算法 以金川校区电力大楼中间的4部电梯为例。...(4)中间部电梯设置为联动模式,外侧部电梯设置为联动模式。 要求: 1.设计电梯调度算法,使电梯可对乘客的呼叫作出正确反应。
  • Revit二次开发之DMU

    2021-04-09 17:25:43
    这种联动关系是Revit内部设计好的,如果我们需要一些自定义的联动关系, 比如我希望两面墙的总长度是固定的,增加一面墙长度之后,另外一面墙会跟着缩减。又或者,链接文档的某个构件移动了,希望主文件的某个不...
  • 消防中总线及联动控制原理详解?主消防车应与现场安装的感烟探测器、温度探头、火灾...联动原理是一旦发生火灾,消防车发出信号启动喷淋泵、防火卷帘等设备,实现消防灭火的功能这就是消防电子产品中所谓的消防二...
  • 科目2最终总结

    2019-07-24 14:39:00
    最最终坡起:坡下起步时,左脚半联动,右脚轻加油稳住,保持车低速爬坡,对准箭头和边线,到位置时同时踩刹车和离合,左脚慢抬到半联动方向盘抖动,拉手刹,右脚放到油门上踩死稳住不动,这时左脚离合也稳住千万不要...
  • 根据《固定消防炮灭火系统设计规范》GB50338-2003有关章节规定,室内大空间建筑物消防炮的布置数量不少于2,其布置高度应保证消防炮的射流不受上部建筑构件的影响,并能使两门水炮的水射流同时到达被保护区域的
  • 虹膜门禁系统

    2013-09-04 14:35:34
    门禁考勤系统——出入口自动控制系统,它具有对人员进出、授权、查询、统计和防盗报警保安等, ...门禁考勤系统门禁系统按联接方式可分为多联网门禁系统和单门单机门禁系统种;按数据读取方式可分为
  • CF1213G Path Queries

    2019-09-18 17:48:37
    题目传送 解题方法 本题可以把查询离线,然后我们把边权从小到大排序,每次加入完这个权值的边更新这个查询的答案,同时更新后面的答案。 然后如何更新答案呢,我们只需要求出来需要练边的两侧点分别联通了多少个...
  • 学开车起步停车口诀

    万次阅读 2012-12-11 09:55:28
    汽车起步口诀  一踏(离合)  二挂(一档)  三开(左灯)  四按(喇叭)  五放(手刹)  六看(前后左右情况)  七松加(松离合、加油) 汽车起步规范动作口诀 ...起动必须半联动。...
  • 学车-科目二

    2020-12-10 15:59:54
    进车:打开车门,坐好,调整座椅---先前后调,再后背调,系好安全带,调左右后视灯----左后视灯:个车把手,都露出来,并且在镜子里快一半的位置,右后视灯:个车把手,都露出来,1/3的位置吧,都调好后,进行...

空空如也

空空如也

1 2
收藏数 40
精华内容 16
关键字:

两联动门