链接:https://blog.csdn.net/qq_32113629/article/details/79536177
现在大部分电商的网站、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>
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>
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>