vue——省市区三级联动demo

最近学习vue，想着写一写demo练习练习。

此demo是省市区的三级联动，像这样的场景我们经常看到。我也是刚开始写没有头绪，然后多方查资料。

写此demo时踩过的坑：

1、数据：我们希望后台给我们的数据是怎样的，方便我们操作。省市区三级联动，数据是超级相关联的，我们不能单独存数据。所以数据用数组对象，一级一级的拿到数据。

2、在用v-model双向绑定select数据时，出现一个问题。我最开始在option标签里面加了value属性，然后就怎样也拿不到select中选择的option的值。这个问题我目前也没有想清楚是啥原因，就比如像这样，有一个value属性，那么我怎么都关联不到city的值。

我猜想是因为v-model默认关联的就是value属性，然后value默认为空就不可以，但是不是很确定，有大神如果知道，一定要给我说说呀。（这个问题我找了好久好久，因为此时vs code我安装了标签提示插件，然后默认就有。找了好久才发现是它的原因，所以证明一件事，还是不要太懒啊。。）

3、选择省更新数据，最开始只想着更新市的数据，这样的话若我们第二次选择时，还没有选择市时，我们的区的数据还是之前的数据，比如：

第一次：

第二次我们想选其他省：

选择省时点了上海市，只有市的数据更新了，而区的数据还是我们第一次选择的

解决：方法一：还是只调用更新市数据的函数，在函数开始给sub数据赋值为空值，

因为我写了如果没有值就不显示

那么结果就是：

当我们选择市时，又出现区的数据

方法二：我们更希望选择省之后，市区数据都跟着变为对应的默认值，所以，就可以调用两个方法

这样随便改变那个省，就有对应默认的市区数据

第一次：

第二次：

index.html：

<div id="itany"><!-- 省 --><!-- 调用两个方法，同时改变市区数据 --><select v-model="prov" @change="updataCity();updataSub()"><option v-for='v in arr'>{{v.name}}</option></select><!-- 市 --><select v-model="city" @change="updataSub()" v-if="city"><option v-for='v in cityArr'>{{v.name}}</option></select><!-- 区 --><select v-model="sub" v-if="sub"><option v-for="v in subArr">{{v}}</option></select>
</div>

index.js:

window.onload = function(){//后台拿到的数据，我就写了一部分测试var array = [{name: '请选择',sub: [{name:'请选择'}]},{name: '北京',sub:[{name: '北京',sub: ['大兴区','东城区','朝阳区']}]},{name: '四川省',sub:[{name: '成都市',sub: ['双流区','新都区','成华区','高新区','青羊区','锦江区']},{name: '遂宁市',sub: ['船山区','大英县','安居区','射洪县','蓬溪县']},{name: '自贡市',sub: ['大安区','自流井区','贡井区','沿滩区','荣县','富顺区']},{name: '泸州市',sub: ['江阳区','纳溪区','龙马潭区','泸县','合江县','叙永县','古蔺区']},]},{name: '广东省',sub:[{name: '广州市',sub: ['越秀区','荔湾区','天河区','海珠区','黄埔区']},{name: '深圳市',sub: ['福田区','南山区','宝安区','龙岗区']},{name: '珠海市',sub: ['香洲区','金湾区']},{name: '汕头市',sub: ['金平区','濠江区','潮南区','龙湖区']},{name: '佛山市',sub: ['禅城区','三水区','南海区']}]},{name: '上海市',sub:[{name: '上海市',sub: ['普陀区','静安区','杨浦区','黄浦区','南汇区','嘉定区','徐汇区']}]}]new Vue({el: "#itany",data: {arr: array,prov: '', //被选择的省cityArr:[], //选择对应省的市数据city:'',  //被选择的市sub: '',  //被选择的区subArr:[], //选择对应市的区数据},methods: {//更新市数据updataCity:function(){ //在重新选择省的时候，清除之前的被选择的区数据,如果在选择省的时候只调用这个方法时，//可以采取将三级区数据置空，这样三级选择框就不会出现，否则会出现省市变化了区未变的情况// this.sub='';    //此demo中，在选择省时，我采用的是调用两个方法//给cityArr[]赋值this.arr.forEach((item,index)=>{if(item.name == this.prov){this.cityArr = item.sub;}});//初始化默认值this.city = this.cityArr[0].name;},//更新区数据updataSub:function(){ this.cityArr.forEach((item,index)=>{if(item.name == this.city){this.subArr = item.sub;}});this.sub = this.subArr[0];}}});
}

vue——省市区三级联动demo相关推荐

vue省市区三级联动mysql,js/json,html/jsp
大家好,我是烤鸭: 省市区三级联动数据及页面: 测试的时候,发现少了几个地区,现在补上了,也优化了下排版. 如果你懒得复制和看的话,这里是打包的下载地址. 之前的资源地址也改了,http://down ...
vue 省市区三级联动 antd 级联组件 Cascader
需求与功能该功能实现了中国内的省市区的三级联动,基于 antd-vue 中的 Cascader 做的组件,支持原有的所有功能效果展示支持联想搜索支持显示部分省份例子(本例子是基于 ant ...
vue省市区三级联动
HTML代码 <div id="example"><select v-model="prov"><option v-for=&qu ...
超实用的vue省市区三级联动（带地区编码）
效果图完整代码 <template><div><el-row><el-form :model="queryParams" inline ...
element vue 获取select 的label_vue+elementui实现省市区三级联动
老大喊你起来营业了醒醒,打工人!开始工作了,今天讲讲我的踩坑记录吧! 这次我们用的是vue-admin-webapp,基于 vue 和 element-ui 采用了最新的前端技术栈来开发一个管理系统 ...
vue实现省市区三级联动地址选择组件
昨天收到一个新的需求,需要选择地址,因此就要做一个省市区三级联动的组件来使用,在网上找了一些资源,然后进行了尝试,没想到就这么成功了!要记录一下方便后续使用. 效果如下: 下面就记录一下代码叭! 一 ...
vue 实现仿京东、淘宝省市区三级联动
vue 实现仿京东.淘宝省市区三级联动在做电商或其他项目的时候,物流我们肯定会集成进去,那么我们肯定需要集成地址管理,地址管理除了最基本的省.市.区外,我们还要单独添加一个详细地址字段,不然我们无法 ...
vue实现省市区三级联动地址选择
导航利用select下拉框实现 CV通道省市区三级json 凑字数之前由于产品需求,自己去实现了省市区三级联动的选择,但是总感觉有所欠缺,后来花了一点时间整理,特此分享下我的思路,望大佬们指教. ...
vue中实现省市区三级联动(V-Distpicker插件)
本次项目中使用了V-Distpicker 插件实现了省市区三级联动 V-Distpicker 项目文档地址 V-Distpicker git地址使用方法 npm install v-distpick ...

vue——省市区三级联动demo

vue——省市区三级联动demo相关推荐

最新文章

热门文章