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 相关文章推荐
jQuery中需要注意的细节问题小结
Dec 06 Javascript
javascript获取web应用根目录的方法
Feb 12 Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
微信小程序功能之全屏滚动效果的实现代码
Nov 22 Javascript
Vue实现开心消消乐游戏算法
Oct 22 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
vue随机验证码组件的封装实现
Feb 19 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 setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
PHP CURL获取cookies模拟登录的方法
2013/11/04 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
简单谈谈PHP中strlen 函数
2016/02/27 PHP
PHP时间处理类操作示例
2018/09/05 PHP
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
jQuery中animate()方法用法实例
2014/12/24 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
vue-cli3.0 环境变量与模式配置方法
2018/11/08 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
Python、Javascript中的闭包比较
2015/02/04 Python
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
电脑租赁公司创业计划书
2014/01/08 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
单位作风建设自查报告
2014/10/23 职场文书
MySQL里面的子查询的基本使用
2021/08/02 MySQL
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers
python中validators库的使用方法详解
2022/09/23 Python