vue基于mint-ui的城市选择3级联动的示例


Posted in Javascript onOctober 25, 2017

项目是基于 vue2 的移动端项目

1、实际效果

vue基于mint-ui的城市选择3级联动的示例

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

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

如下:

https://github.com/artiely/Administrative-divisions-of-China(里面包含二级联动数据,三级联动数据,四级联动数据等,找到自己需要的)

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>

参考文章https://3water.com/article/125935.htm(mint-ui picker 的四级联动)

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

Javascript 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
jquery 应用代码 方便的排序功能
Feb 06 Javascript
Javascript中自动切换焦点实现代码
Dec 15 Javascript
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
Apr 06 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 Javascript
jQuery ajax应用总结
Jun 02 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 Javascript
layui实现数据分页功能
Jul 27 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 Javascript
浅谈Vue的加载顺序探讨
Oct 25 #Javascript
JavaScript模块模式实例详解
Oct 25 #Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 #Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 #Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
Oct 25 #Javascript
vue语法之拼接字符串的示例代码
Oct 25 #Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 #Javascript
You might like
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
python通过post提交数据的方法
2015/05/06 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
python中K-means算法基础知识点
2021/01/25 Python
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
网络管理员岗位职责
2014/03/17 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
酒会开场白大全
2015/06/01 职场文书
恋恋笔记本观后感
2015/06/16 职场文书