记录 vant Picker 选择器,实现三级联动,传对应省市区code值
最近使用vant UI写移动端,感觉还不错 功能挺全的,带的还有省市区三级联动。
但是 突然遇到一个线上产品要传的省市区的code码,还和vant的 邮编不一样,我*****。
看了一下vant UI有提供 Picker 选择器的api,哇,心里美滋滋,但是api提供的三级联动没有传对应的code,我****,没事凭我的本事,琢磨个几天还不是问题的,哈哈。
开始======================>
首先看一下接口返回的数据结构吧,省市区三级联动,每一级都带的有code。
然后根据 vant Picker 选择器的api 开写。
虽然vant Picker 选择器的api,只提供了二级,但是我们可以模仿这写一下三级。
上代码
有大佬知道为什么,vant Picker回调为什么,dom渲染了,但回调只修改了当前列的数据(是不是我渲染的有问题)
上面代码可以实现 三级联动 传 code。
记录 vant Picker 选择器,实现三级联动,传对应省市区code值的更多相关文章
- 三级联动查询全国省市区(xml与数据库)
提供有china.xml和china.sql文件,实现全国省市区的三级联动效果 一.xml实现 import java.awt.EventQueue; import javax.swing.JFram ...
- 使用mint ui 的picker解决城市三级联动
<mt-popup v-model="popupVisible" position="bottom"> <div class="po ...
- Select2实现的带搜索的省市区三级联动代码 设置默认初始值
$(function() { $('#loc_province').select2('val','2456'); $('#loc_province').change(); $('#loc_city') ...
- Mint-UI Picker 三级联动
Mint-UI Picker组件的三级联动 HTML: <mt-picker :slots="slots" value-key="name" @chang ...
- js封装的三级联动菜单(使用时只需要一行js代码)
前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大 ...
- JS省市区三级联动
不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...
- C# 基于Bootstrap的三级联动
实现效果如图: 一.声明市.县.乡对应的下拉控件select <div class="form-group"> <label class="col-sm ...
- Vue如何使用vue-area-linkage实现地址三级联动效果
很多时候我们需要使用地址三级联动,即省市区三级联动.网上有很多插件,在此介绍Vue的一款地区联动插件:vue-area-linkage,下面介绍如何使用这个插件实现地址联动效果: 1. ...
- 用mint-ui picker组件 实现省市区三级联动
公司上一期项目中新增了省市区滑动三级联动效果,用的是mint-ui的picker组件和popup组件,效果如下:点击确定换地区,点击取消不变 省市区数据是后台给的(根据上一级的id,获取下一级数据列表 ...
随机推荐
- mybatis缓存机制与装饰者模式
mybatis 缓存 MyBatis的二级缓存的设计原理 装饰者模式
- 网络编程[第三篇]基于tcp协议实现远程连接
需要用到subprogress模块来远程控制cmd控制台程序来得到控制台的输出信息 一.服务端 —— 控制输出信息 import socket import subprocess #socket实例化 ...
- 第八章 ZYNQ-MIZ701 软硬调试高级技巧
软件和硬件的完美结合才是SOC的优势和长处,那么开发ZYNQ就需要掌握软件和硬件开发的调试技巧,这样才能同时分析软件或者硬件的运行情况,找到问题,最终解决.那么本章将通过一个简单的例子带大家使用v ...
- 如何设置输入IP地址就直接访问到某一个网站
如何设置输入IP地址就直接访问到某一个网站 1).在IIS中添加好站点后,在网站绑定中设置明确的IP地址,如下图: 2).修改Default WebSite的端口,或者是把Default WebSit ...
- mysql批量修改数据库表引擎
数据库表之前的引擎是MyISAM,影响事务操作,要改成Innodb引擎 查询表引擎 SELECT CONCAT(table_name,' ', engine) FROM information_sch ...
- mysql数据库的锁表与解决办法(原博客url:http://www.cnblogs.com/wanghuaijun/p/5949934.html)
MySQL锁概述 相对其他数据库而言,MySQL的锁机制比较简单,其最显著的特点是不同的存储引擎支持不同的锁机制.比如,MyISAM和MEMORY存储引擎采用的是表级锁(table-level loc ...
- nginx 实践配置
nginx.conf文件 user root; worker_processes 1; error_log logs/error.log crit; #error_log logs/error.log ...
- TPFanControl.ini
TPFanControl.ini 64位系统安装目录分为两种 64位用:C:\Program Files 32位用:C:\Program Files (x86) 64位系统系统目录分为两种 64位用: ...
- jstl的forEach 循环
jstl的forEach循环一般有两种格式 1.当需要操作循环的下标时,或者需要固定循环的次数时: <c:forEach begin="0" end="5" ...
- 安卓开发之HttpURLConnection类和Handler类的使用
package com.lidaochen.test; import java.io.ByteArrayOutputStream; import java.io.InputStream; public ...