vue基于mint-ui实现城市选择 * 联动
作者:xilong 发布时间:2024-06-05 09:17:45
标签:vue,mint,ui, , 联动
项目是基于vue2 的移动端项目,供大家参考,具体内容如下
1、实际效果
地址 * 联动 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 的四级联动)
来源:https://www.jianshu.com/p/cdd3b4c1e6b5
0
投稿
猜你喜欢
- 背景:今天同事写代码,用python读取一个四五百兆的文件,然后做一串逻辑上很直观的处理。结果处理了一天还没有出来结果。问题出在哪里呢?解决
- 一、sh是什么SH是一个独特的子进程包装器,可将您的系统程序动态映射到Python函数。SH帮助您用Python编写Shell脚本,既能支持
- 在JavaScript中存在这样两种原始类型:Null与Undefined。这两种类型常常会使JavaScript的开发人员产生疑惑,在什么
- 使用JS实现在图片上显示左右箭头的翻页代码,预览效果网址:http://www.keleyi.com/keleyi/phtml/picnex
- 今天知数堂一个学生反馈说在优化课中老师讲Innodb是以主键排序存储,读取的时间以主键为顺序读取,但发现个例外,如下:CREATE TABL
- 一 Process对象的join方法在主进程运行过程中如果想并发地执行其他的任务,我们可以开启子进程,此时主进程的任务与子进程的任务分两种情
- 再用PD建表完成后导成SQL脚本然后在SQL Server中运行后生成数据库后,就想到,可不可以将直接将数据库的内容生成PD文档?经过上网查
- 我在前几天的博客中翻译了一篇《20个对学习CSS3大有裨益的资源》的文章,其中推荐了Get started with CSS 3,本文为其中
- 本文以Python3.8为例1、 compileall py文件转换为pyc1.1、compileall命令行模式不需要额外安装,pytho
- 安装 Tesseract OCRTesseract OCR 是一款由 Google 团队开发的开源 OCR(Optical Characte
- 可以查看mysql文件目录my.ini文件,可以找到类似于 datadir="D:/beeagle/Program Files/M
- #最近在网上看代码时,出现了@???的代码,看了好久也不知道是什么意思,经过了解原来是装饰器,我给大家举个例子讲解一下,帮助大家快速理解:#
- 前言:perl是什么,干什么用的?perl原来设计者的意图是用来处理 字符的,80%的强项是处理字符,当然其它的很多都可以。现在很多网页也是
- 每次调用内部的方法时,方法前面加 self.举例:例子参考百度知道里面的回答class MyClass: def __init_
- 相关文章推荐:各种loading加载图标下载 gif格式loadinfo和ajaxload一样,也是一个在线Ajax载入动画生成工
- zabbix监控NginxA机器:zabbix服务端(192.168.234.128) B机器:zabbix客户端(192.168.234.
- 全文检索引擎入门灰常不幸的是,关系型数据库对全文检索的支持没有被标准化。不同的数据库通过它们自己的方式来实现全文检索,而且SQL
- 前言终于能够挤出一点时间来总结最近学到的一些技术知识点了,博主这两周被居家隔离-集中隔离-居家隔离来回折腾,现在终于是得到解放能够空出的时间
- 前言:作为一个.NET开发者而已,有着宇宙最强IDE:Visual Studio加持,让我们的开发效率得到了更好的提升。我们不需要担心环境变
- 在命令行输入mysql -u root –p,输入密码,或通过工具连接数据库时,经常出现下面的错误信息,相信该错误信息很