vue基于mint-ui实现城市选择三级联动


Posted in Javascript onJune 30, 2020

项目是基于vue2 的移动端项目,供大家参考,具体内容如下

1、实际效果

vue基于mint-ui实现城市选择三级联动

地址三级联动 mint-ui picker.png

2、首先你需要去下载一个包含中国省份,城市,区县的数据

如下:
(这个地址里面包含二级联动数据,三级联动数据,四级联动数据等,找到自己需要的)
(一个更好的中国地区数据,推荐用这个)

3、具体代码

主要是用到了mint-ui的picker组件,关于mint-ui的使用就自行看官网

Ⅰ、html组件

<div>
 <mt-picker :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker>
 <p>地址3级联动:{{myAddressProvince}} {{myAddressCity}} {{myAddresscounty}}</p>
</div>

Ⅱ、组件方法

 

<script>
 import { Picker } from 'mint-ui';
 import myaddress from '../../../static/address3.json' //引入省市区数据
 export default {
 name: '',
 components: {
 'mt-picker': Picker
 },
 props: {},
 data () {
 return {
 myAddressSlots: [
  {
  flex: 1,
  defaultIndex: 1, 
  values: Object.keys(myaddress), //省份数组
  className: 'slot1',
  textAlign: 'center'
  }, {
  divider: true,
  content: '-',
  className: 'slot2'
  }, {
  flex: 1,
  values: [],
  className: 'slot3',
  textAlign: 'center'
  },
  {
  divider: true,
  content: '-',
  className: 'slot4'
  },
  {
  flex: 1,
  values: [],
  className: 'slot5',
  textAlign: 'center'
  }
 ],
 myAddressProvince:'省',
 myAddressCity:'市',
 myAddresscounty:'区/县',
 }
 },
 created() {


 },
 methods: {
 onMyAddressChange(picker, values) {
 if(myaddress[values[0]]){ //这个判断类似于v-if的效果(可以不加,但是vue会报错,很不爽)
  picker.setSlotValues(1,Object.keys(myaddress[values[0]])); // Object.keys()会返回一个数组,当前省的数组
  picker.setSlotValues(2,myaddress[values[0]][values[1]]); // 区/县数据就是一个数组
  this.myAddressProvince = values[0];
  this.myAddressCity = values[1];
  this.myAddresscounty = values[2];
 }
 },
 },
 mounted(){
 this.$nextTick(() => { //vue里面全部加载好了再执行的函数 (类似于setTimeout)
 this.myAddressSlots[0].defaultIndex = 0 
 // 这里的值需要和 data里面 defaultIndex 的值不一样才能够初始化
 //因为我没有看过源码(我猜测是因为数据没有改变,不会触发更新)
 });
 }
 }
</script>

参考文章 vue mint-ui 实现省市区街道4级联动(mint-ui picker 的四级联动)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js比较和逻辑运算符的介绍
Mar 10 Javascript
JS去除右边逗号的简单方法
Jul 03 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
微信小程序开发之自定义tabBar的实现
Sep 06 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 Javascript
vue中mint-ui的使用方法
Apr 04 #Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 #Javascript
JS实现DOM删除节点操作示例
Apr 04 #Javascript
JS实现的DOM插入节点操作示例
Apr 04 #Javascript
AngularJS 应用模块化的使用
Apr 04 #Javascript
vue todo-list组件发布到npm上的方法
Apr 04 #Javascript
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 #Javascript
You might like
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
YII路径的用法总结
2014/07/09 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
ArrayList类(增强版)
2007/04/04 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
JS作用域链详解
2017/06/26 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
python简单实现基数排序算法
2015/05/16 Python
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
python邮件发送smtplib使用详解
2020/06/16 Python
Django框架视图介绍与使用详解
2019/07/18 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
Python的in,is和id函数代码实例
2020/04/18 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
大学生毕业自我评价范文分享
2013/11/07 职场文书
大学军训感言200字
2014/02/26 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
2014年客房部工作总结
2014/11/22 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
新课程改革心得体会
2016/01/22 职场文书
高二英语教学反思
2016/03/03 职场文书