溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文介紹了vue + elementUI實現省市縣三級聯動的方法示例，分享給大家，具體如下：
1、首先需要準備省市縣json文件，網上有很多可以下載。項目中使用的city.json數據是這樣的格式：
[
{
"value": "110000",
"label": "北京市",
"children": [
{
"value": "110000",
"label": "北京市",
"children": [
{
"value": "110101",
"label": "東城區"
},
{
"value": "110102",
"label": "西城區"
},
{
"value": "110105",
"label": "朝陽區"
},
{
"value": "110106",
"label": "豐臺區"
},
{
"value": "110107",
"label": "石景山區"
},
{
"value": "110108",
"label": "海淀區"
},
{
"value": "110109",
"label": "門頭溝區"
},
{
"value": "110111",
"label": "房山區"
},
{
"value": "110112",
"label": "通州區"
},
{
"value": "110113",
"label": "順義區"
},
{
"value": "110114",
"label": "昌平區"
},
{
"value": "110115",
"label": "大興區"
},
{
"value": "110116",
"label": "懷柔區"
},
{
"value": "110117",
"label": "平谷區"
},
{
"value": "110118",
"label": "密云區"
},
{
"value": "110119",
"label": "延慶區"
}
]
}
]
},
{
"value": "120000",
"label": "天津市",
"children": [
{
"value": "120000",
"label": "天津市",
"children": [
{
"value": "120101",
"label": "和平區"
},
......
2、創建一個組件開始寫代碼
<template>
<div class="linkage">
<div>
<el-select v-model="selectProvince" filterable size="small" @change="selectProvinceFun($event)" placeholder="請選擇省份">
<el-option value="" label="請選擇省份"></el-option>
<el-option :value="item" :label="item.label" v-for="(item, index) in city" :key="index"></el-option>
</el-select>
</div>
<div>
<el-select v-model="selectCity" filterable size="small" @change="selectCityFun($event)" placeholder="請選擇城市">
<el-option value="" label="請選擇城市"></el-option>
<el-option :value="item" :label="item.label" v-for="(item, index) in cityList" :key="index"></el-option>
</el-select>
</div>
<div>
<el-select v-model="selectArea" filterable size="small" @change="selectAreaFun($event)" placeholder="請選擇區縣">
<el-option value="" label="請選擇區縣"></el-option>
<el-option :value="item" :label="item.label" v-for="(item, index) in areaList" :key="index"></el-option>
</el-select>
</div>
</div>
</template>
<script>
import city from '@/assets/json/city.json'
export default {
name: 'linkage',
data () {
return {
// 整個省市縣數據
city: city,
// 被選中的市數據
cityList: [],
// 被選中的縣數據
areaList: [],
selectProvince: {},
selectCity: {},
selectArea: {}
}
},
mounted () {
},
methods: {
// 省份 市 縣聯動
selectProvinceFun (event) {
console.log(event)
if (event) {
this.cityList = event.children
} else {
this.cityList = []
}
this.areaList = []
this.$emit('getLawyerListInfo', [event.label, 'province'])
},
selectCityFun (event) {
console.log(event)
if (event) {
this.areaList = event.children
} else {
this.areaList = []
}
this.$emit('getLawyerListInfo', [event.label, 'city'])
},
selectAreaFun (event) {
console.log(event)
this.$emit('getLawyerListInfo', [event.label, 'area'])
}
}
}
</script>
<style lang="scss" scoped>
.linkage {
display: flex;
div {
margin-right: 5px;
}
}
</style>
總結：整個過程很簡單，就是在選中省的時候獲取他的所有children節點數據（市）在選擇市的時候獲取她的所有children節點數據（區縣）
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
