Element-UI 省市區(縣)三級關聯
由于公司移動端使用的是Vux的UI架構,該架構有x-address元件,其中包含了省市縣的資料,通過Element-UI實作與其相同的省市區(縣)三級關聯。
Vux中x-address對全國省市區的資料進行了封裝,引入不同版本的JSON檔案展示不同的内容,這裡我引入的是V4版本(最新版本)的JSON資料,JSON格式如下圖:
思路:在此我列舉了省市縣的資料,相關資料下載下傳,很明顯省市區有各自的特性
1. 省的value是0000結尾;
2. 市的value是00結尾;同時又parent字段對應相應的省;
3. 區(縣)parent字段對應的相應的市
直接上幹貨,相應的代碼如下展示
HTML
<template>
<div>
<el-select v-model="valueProvince"
placeholder="請選擇省"
@change="changeProvince">
<el-option
v-for="item in provinceList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select v-model="valueCity"
placeholder="請選擇市"
@change="changeCity">
<el-option
v-for="item in cityOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select v-model="valueOrigin"
placeholder="請選擇區"
@change="changeOrigin">
<el-option
v-for="item in originOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</template>
JS
import axios from 'axios'
export default {
name: 'HelloWorld',
data () {
return {
provinceList: [], // 省清單
cityList: [], // 市清單
originList: [], // 區清單
valueProvince: '', // 所選的省
valueCity: '', // 所選的市
valueOrigin: '', // 所選的區
cityOptions: [], // 市下拉框資料
originOptions: [] // 區下拉框資料
}
},
methods: {
// 選擇省
changeProvince(val) {
this.provinceList.forEach((province, index) => {
if (val.toString() === this.provinceList[index].value) {
this.cityOptions = this.provinceList[index].children
this.valueCity = this.provinceList[index].children[0].value
this.originOptions = this.provinceList[index].children[0].children
this.valueOrigin = this.provinceList[index].children[0].children[0].value
}
})
},
// 選擇市
changeCity(val) {
this.cityList.forEach((city, index) => {
if (val.toString() === this.cityList[index].value) {
this.originOptions = this.cityList[index].children
this.valueOrigin = this.cityList[index].children[0].value
}
})
},
// 選擇區
changeOrigin(val) {
this.valueOrigin = val
},
_getJsonData() {
axios.get('../../static/china_address_v4.json').then((res) => {
this.provinceList = []
this.cityList = []
this.originList = []
res.data.forEach((item) => {
if (item.value.match(/0000$/)) {
this.provinceList.push({
value: item.value,
label: item.name,
children: []
})
} else if (item.value.match(/00$/)) {
this.cityList.push({
value: item.value,
label: item.name,
children: []
})
} else {
this.originList.push({
value: item.value,
label: item.name
})
}
})
for (let index in this.provinceList) {
for (let index1 in this.cityList) {
if (this.provinceList[index].value.slice(0, 2) === this.cityList[index1].value.slice(0, 2)) {
this.provinceList[index].children.push(this.cityList[index1])
}
}
}
for(let item1 in this.cityList) {
for(let item2 in this.originList) {
if (this.originList[item2].value.slice(0, 4) === this.cityList[item1].value.slice(0, 4)) {
this.cityList[item1].children.push(this.originList[item2])
}
}
}
})
}
},
created() {
this._getJsonData()
}
}
這裡我使用axios讀取json檔案,基于我之前的思路,周遊資料并正則比對相應的資料(4個0對應省,2個0對應市,其他為區),添加至相應的數組中。
注意
- 靜态檔案存儲路徑,小心404報錯。
- 資料類型沒有對應上。由于Element-UI的el-select元件中有change事件,預設參數是value,它的類型是Number;而解析json檔案出來的資料類型是String。
感謝作者棋鬼王的部落格,https://blog.csdn.net/qq_32113629/article/details/79536177