您好,登录后才能下订单哦!
现在大部分电商的网站、app都需要用户或者管理者去选择设置地区等位置信息。下面我就介绍一下前端开发者用vue,axios,element-ui开发一个省市区三级联动的组件。
1.准备工作,首先我们需要全中国的省市区资源的json数据(科普一下:前六位数字是身份证前六位)
2.搭建vue-cli,安装axios,element-ui,创建vue,webpack项目
1).
在控制台或者终端执行以下代码,其中只需要路由(y),其他e2e,eslint这些不需要(y)
vue init webpack threelink
cd threelink
npm run dev
把没用的组件删除,重新创建组件
npm install axios --save ,安装axios
npm i element-ui -S(这是缩写) , 安装element-ui
2).
在项目threelink->src->main.js里面添加,调用element-ui插件得代码
// 加载element_ui import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)
3).在static下创建json文件夹,文件夹里面放map.json,就是全国地址的数据信息,目录结构如下
3.基本步骤都已经ok,下面我们开始写前端界面代码.
上element-ui官网,找到选择器select,这里我们就不多说了,疯狂地复制粘贴,写css样式就行了。粘贴完修改完之后的样子就是这个样子了,
别着急,一会开始上代码!
4.首先我们要知道,当我们选择之后数据才会变化的,所以要给select绑定change事件。
我们仔细阅读了element-ui的select文档之后发现,v-model的值为当前被选中的el-option的 value 属性值。
5.template组件里面的代码!!!
<div class="linkage"> <el-select v-model="sheng" @change="choseProvince"//这个change事件是select的,不是option的,别写在option里面 placeholder="省级地区"> <el-option v-for="item in province" :key="item.id" :label="item.value" :value="item.id"> </el-option> </el-select> <el-select v-model="shi" @change="choseCity" placeholder="市级地区"> <el-option v-for="item in shi1" :key="item.id" :label="item.value" :value="item.id"> </el-option> </el-select> <el-select v-model="qu" @change="choseBlock" placeholder="区级地区"> <el-option v-for="item in qu1" :key="item.id" :label="item.value" :value="item.id"> </el-option> </el-select> </div>
script标签里面的代码!!
这里主要的难点就是,找到json数据的特点!
像直辖市这些没有市区的,默认省份=市区,例如:省份:天津。城市:天津。区县:。。/
我们可以找到数据之间的规律自己手动增加数据信息,如果要返回给后端,那么就拿出来他的前面的位置参数,或者是后面的未知参数!!
例如:
按正常来讲,是没有红色圈出来的那个参数的,这是我按照正确的规律手动后添加的!!!为了满足直辖市而添加
一定要记得手动添加的数据是无效的!!这个只是为了自己编码方便才添加的!手动添加的那条数据,不要返给后端,要找到它前面的数据,找到真实数据!
import axios from 'axios' export default { data () { return { mapJson:'../static/json/map.json', province:'', sheng: '', shi: '', shi1: [], qu: '', qu1: [], city:'', block:'', } }, methods:{ // 加载china地点数据,三级 getCityData:function(){ var that = this axios.get(this.mapJson).then(function(response){ if (response.status==200) { var data = response.data that.province = [] that.city = [] that.block = [] // 省市区数据分类 for (var item in data) { if (item.match(/0000$/)) {//省 that.province.push({id: item, value: data[item], children: []}) } else if (item.match(/00$/)) {//市 that.city.push({id: item, value: data[item], children: []}) } else {//区 that.block.push({id: item, value: data[item]}) } } // 分类市级 for (var index in that.province) { for (var index1 in that.city) { if (that.province[index].id.slice(0, 2) === that.city[index1].id.slice(0, 2)) { that.province[index].children.push(that.city[index1]) } } } // 分类区级 for(var item1 in that.city) { for(var item2 in that.block) { if (that.block[item2].id.slice(0, 4) === that.city[item1].id.slice(0, 4)) { that.city[item1].children.push(that.block[item2]) } } } } else{ console.log(response.status) } }).catch(function(error){console.log(typeof+ error)}) }, // 选省 choseProvince:function(e) { for (var index2 in this.province) { if (e === this.province[index2].id) { console.log(this.province[index2].id)//你选择的省级编码 console.log(this.province[index2].value)//省级编码 对应的汉字 this.shi1 = this.province[index2].children this.shi = this.province[index2].children[0].value this.qu1 =this.province[index2].children[0].children this.qu = this.province[index2].children[0].children[0].value this.E = this.qu1[0].id } } }, // 选市 choseCity:function(e) { for (var index3 in this.city) { if (e === this.city[index3].id) { this.qu1 = this.city[index3].children this.qu = this.city[index3].children[0].value this.E = this.qu1[0].id // console.log(this.E) } } }, // 选区 choseBlock:function(e) { this.E=e; // console.log(this.E) }, }, created:function(){ this.getCityData() } }
7.效果图
8.OK我个人感觉效果还不错,也不卡
github项目地址:https://github.com/LLJJTT/threelink
以上所述是小编给大家介绍的Vue、element-ui、axios实现省市区三级联动详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对亿速云网站的支持!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。