详解Vue、element-ui、axios实现省市区三级联动
时间：2021-01-06 11:20:50 | 栏目：vue | 点击：次
现在大部分电商的网站、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