最近使用vant UI写移动端,感觉还不错 功能挺全的,带的还有省市区三级联动。

但是 突然遇到一个线上产品要传的省市区的code码,还和vant的 邮编不一样,我*****。

看了一下vant UI有提供 Picker 选择器的api,哇,心里美滋滋,但是api提供的三级联动没有传对应的code,我****,没事凭我的本事,琢磨个几天还不是问题的,哈哈。

vant Picker 选择器

开始======================>

首先看一下接口返回的数据结构吧,省市区三级联动,每一级都带的有code。

然后根据 vant Picker 选择器的api 开写。

虽然vant Picker 选择器的api,只提供了二级,但是我们可以模仿这写一下三级。

上代码


<template>
    <div class="user-login">
        <van-field
        readonly
        clickable
        label="城市"
        placeholder="选择城市"
        @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
            <!-- vant Picker 根据 绑定的columns数据,来渲染几级联动,这里我们使用的是三级联动 -->
            <van-picker v-if="pageShow" show-toolbar :columns="columns" @cancel="onCancel"
  @confirm="onConfirm" @change="onChange" :item-height="35" />
        </van-popup>
    </div>
</template>
<script>
import Vue from 'vue';
import { Picker } from 'vant';
Vue.use(Picker);
import api from "../fetch/api";
export default {
    name:"user-login",
    data(){
        return {
            // columns 为三个,即渲染出来的就是三级联动。
            columns: [
                {
                    values: '',
                    className: 'column1'
                },
                {
                    values: '',
                    className: 'column2',
                    defaultIndex: 0
                },
                {
                    values: '',
                    className: 'column3',
                    defaultIndex: 0
                }
            ],
            pageShow:false, //省市区三级联动是否显示(因为是接口返回的数据,等省市区数据渲染完毕之后,在显示三级联动)
            cityDates:'', //安联当前选中市的所有区所有数据
            showPicker:false, //vant Popup弹出框显示隐藏
            data:'',//接口返回所有省市区数据
        }
    },
    beforeCreate(){
     //这里不要在意 是我们接口的签名。
        var args1 = this.sign({});
        // 接口请求数据
        api.getAnLianArea(args1).then(res => {
            this.data = res.anLianAreaList;
            // 默认展示一级的数据
            this.columns[0].values = Object.values(res.anLianAreaList).map(function(e){
                return {text:e.name,code:e.code}
            })
            // 默认展示二级的数据
            this.columns[1].values = Object.values(res.anLianAreaList[0].anLianCityList).map(function(e){
                return {text:e.name,code:e.code}
            })
            // 默认展示三级的数据
            this.columns[2].values = Object.values(res.anLianAreaList[0].anLianCityList[0].anLianCountyList).map(function(e){
                return {text:e.subcityNameZhs,code:e.subcityCode}
            })
            // 等待dom渲染完毕之后,在去显示 三级联动。
            this.$nextTick(function(){
                this.pageShow = true;
            })
        });
    },
    mounted(){
    },
    methods:{
        // vant picker选择器回调
        onChange(picker, values,index) {
            // 这里我有可能渲染的有问题,导致回调每次都修改了当前列,其他值没有修改,当前列??(当前列什么鬼呀,什么垃圾啊???) 解释一下 ↓↓
            // 因为vant的 van-picker 回调只会返回你修改的那一列,比如现在为 [北京,北京,东城区],你修改了省为[天津市,天津市,和平区],但是vant的change回调会得到[天津市,北京,东城区],后面两个在回调中没有修改,不知道我的渲染方法有问题还是什么问题。
            // 所以我在这里判断change事件触发后,如果你修改了省份的话,回调里面省份会改变,但是市和区还是上一个省份的 市和区,这时我们执行回调修改省,市,区的时候,因为回调只有省改变了,市和区DOM改变了,但是回调里面没改变的问题(不晓得什么问题),这时我们去找省下面的 市,我们取回调的市名称,如果在省下面没有找到这个市,默认展示第一个市,区也默认展示第一个市下面的区,如果遍历市能查到,就去展示对应的市。
            console.log(picker, values,index);
            // 回调时修改第2列数据
            picker.setColumnValues(1, this.cityDate(this.data,values[0].text));
            // 回调时修改第3列数据
            picker.setColumnValues(2, this.county(this.data,values[1].text));
        },
        // 修改市 这里不再多说什么了根据自己的数据格式来
        cityDate(data,province){
            var that = this;
            data.forEach(function(res){
                if(res.name == province){
                    console.log(res)
                    that.cityDates =  res;
                }
            });
            
            return that.cityDates.anLianCityList.map(function(res){
                return {text:res.name,code:res.code};
            })
            // return 返回数据格式,因为我需要省市区code,所以我return的格式是对象,例:[{text:'北京市',code:'1'},{text:'河南省',code:'2'},...],如果你不需要code直接这样就可以 例['北京市','河南省',.....]
        },
        // 修改县 这里不再多说什么了根据自己的数据格式来
        county(data,county){
            var that = this;
            var countyDate = '';
            // 因为vant的 van-picker 回调只会返回你修改的那一列,比如现在为 [北京,北京,东城区],你修改了省为[天津市,天津市,和平区],但是vant的change回调会得到[天津市,北京,东城区],后面两个在回调中没有修改,不知道我的渲染方法有问题还是什么问题。
            // 所以我在这里判断change事件触发后,如果你修改了省份的话,回调里面省份会改变,但是市和区还是上一个省份的 市和区,这时我们执行回调修改省,市,区的时候,因为回调只有省改变了,市和区DOM改变了,但是回调里面没改变的问题(不晓得什么问题),这时我们去找省下面的 市,我们取回调的市名称,如果在省下面没有找到这个市,默认展示第一个市,区也默认展示第一个市下面的区,如果遍历市能查到,就去展示对应的市。
            that.cityDates.anLianCityList.forEach(function(res){
                if(res.name == county){
                    countyDate =  res;
                }
            });
            // 这里如果没有找到对应的县
            if(countyDate == ''){
                countyDate = that.cityDates.anLianCityList[0];
            }
            // return 县
            return countyDate.anLianCountyList.map(function(res){
                return {text:res.subcityNameZhs,code:res.subcityCode};
            })
            // return 返回数据格式,因为我需要省市区code,所以我return的格式是对象,例:[{text:'北京市',code:'1'},{text:'河南省',code:'2'},...],如果你不需要code直接这样就可以 例['北京市','河南省',.....]
        },
        onConfirm(val,a){
            console.log(val)
        },
        onCancel(){
            this.showPicker = false;
        },
    }
}
</script>

 

有大佬知道为什么,vant Picker回调为什么,dom渲染了,但回调只修改了当前列的数据(是不是我渲染的有问题)

上面代码可以实现 三级联动 传 code。

记录 vant Picker 选择器,实现三级联动,传对应省市区code值的更多相关文章

  1. 三级联动查询全国省市区(xml与数据库)

    提供有china.xml和china.sql文件,实现全国省市区的三级联动效果 一.xml实现 import java.awt.EventQueue; import javax.swing.JFram ...

  2. 使用mint ui 的picker解决城市三级联动

    <mt-popup v-model="popupVisible" position="bottom"> <div class="po ...

  3. Select2实现的带搜索的省市区三级联动代码 设置默认初始值

    $(function() { $('#loc_province').select2('val','2456'); $('#loc_province').change(); $('#loc_city') ...

  4. Mint-UI Picker 三级联动

    Mint-UI Picker组件的三级联动 HTML: <mt-picker :slots="slots" value-key="name" @chang ...

  5. js封装的三级联动菜单(使用时只需要一行js代码)

    前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大 ...

  6. JS省市区三级联动

    不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...

  7. C# 基于Bootstrap的三级联动

    实现效果如图: 一.声明市.县.乡对应的下拉控件select <div class="form-group"> <label class="col-sm ...

  8. Vue如何使用vue-area-linkage实现地址三级联动效果

    很多时候我们需要使用地址三级联动,即省市区三级联动.网上有很多插件,在此介绍Vue的一款地区联动插件:vue-area-linkage,下面介绍如何使用这个插件实现地址联动效果:         1. ...

  9. 用mint-ui picker组件 实现省市区三级联动

    公司上一期项目中新增了省市区滑动三级联动效果,用的是mint-ui的picker组件和popup组件,效果如下:点击确定换地区,点击取消不变 省市区数据是后台给的(根据上一级的id,获取下一级数据列表 ...

随机推荐

  1. mybatis缓存机制与装饰者模式

    mybatis 缓存 MyBatis的二级缓存的设计原理 装饰者模式

  2. 网络编程[第三篇]基于tcp协议实现远程连接

    需要用到subprogress模块来远程控制cmd控制台程序来得到控制台的输出信息 一.服务端 —— 控制输出信息 import socket import subprocess #socket实例化 ...

  3. 第八章 ZYNQ-MIZ701 软硬调试高级技巧

      软件和硬件的完美结合才是SOC的优势和长处,那么开发ZYNQ就需要掌握软件和硬件开发的调试技巧,这样才能同时分析软件或者硬件的运行情况,找到问题,最终解决.那么本章将通过一个简单的例子带大家使用v ...

  4. 如何设置输入IP地址就直接访问到某一个网站

    如何设置输入IP地址就直接访问到某一个网站 1).在IIS中添加好站点后,在网站绑定中设置明确的IP地址,如下图: 2).修改Default WebSite的端口,或者是把Default WebSit ...

  5. mysql批量修改数据库表引擎

    数据库表之前的引擎是MyISAM,影响事务操作,要改成Innodb引擎 查询表引擎 SELECT CONCAT(table_name,' ', engine) FROM information_sch ...

  6. mysql数据库的锁表与解决办法(原博客url:http://www.cnblogs.com/wanghuaijun/p/5949934.html)

    MySQL锁概述 相对其他数据库而言,MySQL的锁机制比较简单,其最显著的特点是不同的存储引擎支持不同的锁机制.比如,MyISAM和MEMORY存储引擎采用的是表级锁(table-level loc ...

  7. nginx 实践配置

    nginx.conf文件 user root; worker_processes 1; error_log logs/error.log crit; #error_log logs/error.log ...

  8. TPFanControl.ini

    TPFanControl.ini 64位系统安装目录分为两种 64位用:C:\Program Files 32位用:C:\Program Files (x86) 64位系统系统目录分为两种 64位用: ...

  9. jstl的forEach 循环

    jstl的forEach循环一般有两种格式 1.当需要操作循环的下标时,或者需要固定循环的次数时: <c:forEach begin="0" end="5" ...

  10. 安卓开发之HttpURLConnection类和Handler类的使用

    package com.lidaochen.test; import java.io.ByteArrayOutputStream; import java.io.InputStream; public ...