老大喊你起來營(yíng)業(yè)了

醒醒，打工人！開始工作了，今天講講我的踩坑記錄吧！

這次我們用的是vue-admin-webapp，基于 vue 和 element-ui 采用了最新的前端技術(shù)棧來開發(fā)一個(gè)管理系統(tǒng)。其中，有一個(gè)需求要引入騰訊地圖做一個(gè)省市區(qū)三級(jí)聯(lián)動(dòng)。話不多說，擼起袖子加油干。

騰訊地圖

首先，你得注冊(cè)賬號(hào)；然后申請(qǐng)密鑰(具體操作，自己可以打開騰訊地圖官網(wǎng)進(jìn)行了解)

然后，打開webservice API，這里我們想要的都有；主要用到的就這兩個(gè)接口：
http://apis.map.qq.com/ws/district/v1/list```
http://apis.map.qq.com/ws/district/v1/getchildren
```

三級(jí)聯(lián)動(dòng)

我們要實(shí)現(xiàn)的三級(jí)聯(lián)動(dòng)效果應(yīng)當(dāng)是:

點(diǎn)擊省的時(shí)候，對(duì)應(yīng)下拉框出現(xiàn)；當(dāng)選中的時(shí)候，無論后面市和區(qū)選了沒選，都應(yīng)當(dāng)是清空的

當(dāng)點(diǎn)擊市的時(shí)候，對(duì)應(yīng)下拉框應(yīng)該請(qǐng)求對(duì)應(yīng)的內(nèi)容(這個(gè)其實(shí)應(yīng)該在選中省的時(shí)候就應(yīng)該請(qǐng)求)；然后選中市，無論后面區(qū)選了沒選，都應(yīng)當(dāng)是清空的

點(diǎn)擊區(qū)的時(shí)候，下拉框的內(nèi)容其實(shí)在選中市的時(shí)候已經(jīng)請(qǐng)求好了

跨域問題

原本我以為我可以了，三級(jí)聯(lián)動(dòng)也可以了。事實(shí)是，我可能想多了！！！這里報(bào)了跨域，那么照理說在vue.config.js中配置一下應(yīng)該是可以的

1.先在vue.config.js中配置了一下

proxy: {

//名字可以自定義，用于指定哪些請(qǐng)求需要被 target 對(duì)應(yīng)的主機(jī)代理

'/map': {

target: 'https://apis.map.qq.com',

changeOrigin: true, //這里設(shè)置是否跨域

pathRewrite: { // 路徑重寫

'^/map': ''

},

}

2.再在.env.development環(huán)境中配置一下

VUE_APP_BASE_API2 = '/map'

3.如果不行的話可以用這個(gè)jsonp,先全局安裝，然后npm i vue-jsonp -S；再在main.js中全局引入import { VueJsonp } from ‘vue-jsonp’
Vue.use(VueJsonp)
在頁面中直接,如下所示，就可以了

this.$jsonp(process.env.VUE_APP_BASE_API2+'/ws/district/v1/list',{

key:'yourkey',

output:'jsonp'

}).then(res => {

console.log(res)

// let data = res.data.result

// this.cityList = data[0]

// this.countryList = []

// this.loading = false

}).catch(err => {

console.log(err)

})

開發(fā)ing

1.在頁面中引入 import axios from “axios”;
2.直接用的elementui里面的select選擇器

:model="editForm" :rules="editRules" ref="editForm" style="width: 100%" >

prop="kitchenAddress"

label="地域:"

:label-width="formLabelWidth"

>

v-model="editForm.province"

@change="chooseProvince"

:loading = "loading"

placeholder="請(qǐng)選擇省"

size="small"

style="width:100px"

>

v-for="item in provinceList"

:key="item.id"

:label="item.fullname"

:value="item.id"

>

v-model="editForm.city"

@change="chooseCity"

ref="city"

:loading = "loading"

placeholder="請(qǐng)選擇市"

size="small"

style="width:100px"

>

v-for="item in cityList"

:key="item.id"

:label="item.fullname"

:value="item.id"

>

v-model="editForm.country"

@change="chooseCountry"

ref="country"

:loading = "loading"

placeholder="請(qǐng)選擇區(qū)"

size="small"

style="width:100px"

>

v-for="item in countryList"

:key="item.id"

:label="item.fullname"

:value="item.id"

>

3.開始獲取省市區(qū)列表?這里yourkey指的是你自己申請(qǐng)的key

getProvince(){

axios.get(process.env.VUE_APP_BASE_API2+'/ws/district/v1/list?key=yourkey')

.then(res => {

this.loading = true;

let data = res.data.result

this.provinceList = data[0]

this.loading = false

}).catch(err => {

console.log(err)

})

}

根據(jù)省id來獲取市的列表

chooseProvince(e){

this.$set(this.editForm,"city")

this.$set(this.editForm,"country")

let provinceId = e

this.loading = true

if(!!provinceId){

axios.get(process.env.VUE_APP_BASE_API2+'/ws/district/v1/getchildren?key=yourkey&id='+provinceId)

.then(res => {

let data = res.data.result

this.cityList = data[0]

this.countryList = []

this.loading = false

}).catch(err => {

console.log(err)

})

}

}

根據(jù)市id獲取區(qū)列表

chooseCity(id){

let cityId = id

this.loading = true

this.$set(this.editForm,"country")

if(!!cityId){

axios.get(process.env.VUE_APP_BASE_API2+'/ws/district/v1/getchildren?key=yourkey&id='+cityId)

.then(res => {

let data = res.data.result

this.loading = false

this.countryList = data[0]

}).catch(err => {

console.log(err)

})

}

}

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的element vue 获取select 的label_vue+elementui实现省市区三级联动的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。