老大喊你起來營業了

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

這次我們用的是vue-admin-webapp，基于 vue 和 element-ui 采用了最新的前端技術棧來開發一個管理系統。其中，有一個需求要引入騰訊地圖做一個省市區三級聯動。話不多說，擼起袖子加油干。

騰訊地圖

首先，你得注冊賬號；然后申請密鑰(具體操作，自己可以打開騰訊地圖官網進行了解)

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

三級聯動

我們要實現的三級聯動效果應當是:

點擊省的時候，對應下拉框出現；當選中的時候，無論后面市和區選了沒選，都應當是清空的

當點擊市的時候，對應下拉框應該請求對應的內容(這個其實應該在選中省的時候就應該請求)；然后選中市，無論后面區選了沒選，都應當是清空的

點擊區的時候，下拉框的內容其實在選中市的時候已經請求好了

跨域問題

原本我以為我可以了，三級聯動也可以了。事實是，我可能想多了！！！這里報了跨域，那么照理說在vue.config.js中配置一下應該是可以的

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

proxy: {

//名字可以自定義，用于指定哪些請求需要被 target 對應的主機代理

'/map': {

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

changeOrigin: true, //這里設置是否跨域

pathRewrite: { // 路徑重寫

'^/map': ''

},

}

2.再在.env.development環境中配置一下

VUE_APP_BASE_API2 = '/map'

3.如果不行的話可以用這個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)

})

開發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="請選擇省"

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="請選擇市"

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="請選擇區"

size="small"

style="width:100px"

>

v-for="item in countryList"

:key="item.id"

:label="item.fullname"

:value="item.id"

>

3.開始獲取省市區列表?這里yourkey指的是你自己申請的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)

})

}

根據省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)

})

}

}

根據市id獲取區列表

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位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。