现在大多数电子商务网站和应用程序都需要用户或管理人员选择设置区域等位置信息。现在我来介绍一下使用vue、axios和element-ui开发省市三级联动组件的前端开发者。

1.准备，首先需要国内省市资源json数据(科普：前六位是身份证前六位)

2.构建vue-cli，安装axios和element-ui，并创建vue和webpack项目

1).

在控制台或终端上执行以下代码，其中只需要路由(y)，而其他e2e和eslint不需要(y)

vue init webpack三链接

cd三通

npm运行开发

删除无用的组件并重新创建它们

Npm安装axios -保存，安装axios

Npm i元素-ui -S(这是缩写)，安装元素-ui

2).

添加代码来调用项目threelink-src-main.js中的element-ui插件。

//从' element-ui ' import ' element-ui/lib/theme-粉笔/index.css' vue.use (element ui) 3)加载element _ ui导入元素ui。在static下创建json文件夹，将map.json放在文件夹中，这是国家地址的数据信息。目录结构如下

3.基本步骤已经可以了。现在我们开始编写前端接口代码。

去element-ui官网，找到选择器选择，这里就不多说了，疯狂复制粘贴，写css样式就可以了。粘贴修改后，是这样的。

别担心，稍后开始加载代码！

4.首先，我们需要知道数据在我们选择之前是不会改变的，所以我们需要绑定一个变更事件来选择。

在仔细阅读了element-ui的select文档后，我们发现v-model的值就是当前选中的el-option的值属性值。

5.5.template组件中的代码！

div class=' link ' El-select v-model=' sheng ' @ change=' chose providence '/此更改事件是select，不是option。不要写在选项占位符='省级区域' el-option v-for='省内项目' : key=' item . id ' : label=' item . value ' : value=' item . id '/El-option/El-select El-select v-model=' Shi ' @ change=' choice city '占位符='市级区域' El-option v-for=' item in Shi ' : key=' item。id' :标签='项目。value ' 3336 0 value=' item . id '/El-option/El-select El-select v-model=' qu ' @ change=' chose block '占位符='区级' El-option v-for=' qu 1 '中的项目： key=' item。id' :标签='项目。值' : Value='项。divscript标记中的id'/el-option/el-select/code！

这里的主要难点是找到json数据的特点！

如果没有像直辖市那样的市区，默认省=市区，例如：天津。城市：天津。区县：/

我们可以找到数据之间的规则，手动添加数据信息。如果要返回后端，就要取出前面的位置参数或者后面的未知参数！

例如：

正常情况下没有红圈的参数，是我按照正确的规则手工添加的！为适应直辖市的需要而增加

请记住，手动添加的数据无效！这只是为了方便编码而添加的！不要将手动添加的数据返回到后端，而是找到它之前的数据和真实数据！

从“axios”导入爱可信导出默认{ data(){ return { mapjs : }./static/json/map.json ' '，province: ' '，she : ' '，shi: ' '，shi1: []，qu: ' '，qu1: []，a : ' '，block: ' '，} }，methods 3360 {//加载瓷器；(中国)中国地点数据，三级getcity data :函数(){ var=this axios。得到(这个。mapjson ).然后（函数(回应){ if(回应。status==200){ var data=response。数据表明。省份=[]那个. city=[]那个. block=[] //省市区数据分类用于(数据中的定义变量项目){ if(item。match(/0000 $/)} {//省那个。省份。push({id: item，value: data[item]，children :[]})else if(item。匹配(/00 $/){//市that.city.push({id: item，value: data[item]，children :[]})else {//区that.block.push({id: item，value: data[item]}) } } //分类市级用于(该省的var索引){ for(该市的var index1 in(该省[index].id.slice(0，2)==该市[index1].id.slice(0，2)) {那个。省份[索引。孩子们。推(那个。城市[索引1])} } }//分类区级用于(那个。城市中的var项目1){对于(那个。街区中的中的var项目2(那个。block[item2].id.slice(0，4)==那个。城市[item1].id.slice(0，4)){ 0那个。city[item1].children.push(那个。block[item 2])} } } } else { console。日志(响应。状态)} }).捕捉(函数（错误){console.log(错误类型)}) },//选省chosseprovence :函数(e){ for(var索引2在此。省份){ if (e===this。省份[索引2].id) { console.log(这。省份[索引2].id)//你选择的省级编码console.log(这。省份[索引2].值)//省级编码对应的汉字这个。省份[索引2].孩子这个。省份[索引2].儿童[0]。value this.qu1=this。省份[索引2].儿童[0]。孩子这个。省份[索引2].儿童[0]。儿童[0]。重视这一点E=this.qu1[0].id } } }，//选市chosecity3360函数(e){ for(var索引3在此。城市){ if(e===this。城市[指数3]。id) { this.qu1=this.city[index3].儿童这个城市.儿童[0]。重视这一点E=this.qu1[0].id //console.log(这E) } } }，//选区choseblock :函数(e){ this .E=e//console.log(这. E) }，}，创建d :函数(){ this。getcity data()} } 7 .效果图

8.好我个人感觉效果还不错，也不卡

开源代码库项目地址：https://github。com/lljjt/three link

以上所述是小编给大家介绍的Vue、element-ui、axios实现省市区三级联动详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！