示例：選擇省市區(qū)的三級(jí)聯(lián)動(dòng)

template：

<el-form-item label="地址：" >
                        <el-select v-model="prov">
                            <el-option v-for="option in arr" :value="option.name">
                                {{ option.name }}
                            </el-option>
                        </el-select>
                        <el-select v-model="city">
                            <el-option v-for="option in cityArr" :value="option.name">
                                {{ option.name }}
                            </el-option>
                        </el-select>
                        <el-collapse-transition>
                            <el-select v-model="district" v-if="district">
                                <el-option v-for="option in districtArr" :value="option.name">
                                    {{ option.name }}
                                </el-option>
                            </el-select>
                        </el-collapse-transition>
                        <el-input placeholder="請(qǐng)輸入收貨人地址"></el-input>
                    </el-form-item>

script:

import arrAll from './assets/js/distList.js'
data(){
      return {
            prov: '廣東',
        city: '廣州',
        district: '荔灣區(qū)',
        cityArr: [],
        districtArr: [],
        arr: arrAll
      }
},
created(){
            this.updateCity();
            this.updateDistrict();
        },
watch: {
            prov: function () {
                this.updateCity();
                this.updateDistrict();
            },
            city: function () {
                this.updateDistrict();
            }
 },
methods{
        updateCity: function () {
                try{
                    this.arr.forEach((item,index)=>{
                        if(item.name === this.prov){
                            this.cityArr = item.sub
                            foreach.break = new Error("StopIteration")
                        }
                    })
                }catch(e){
                    if(e.message==="foreach is not defined") {
                        //console.log("...")
                    }else throw e
                }
                this.city = this.cityArr[1].name;
            },
            updateDistrict: function () {
                try{
                    this.cityArr.forEach((item,index)=>{
                        if(item.name === this.city){
                            this.districtArr = item.sub
                            foreach.break = new Error("StopIteration")
                        }
                    })
                }catch(e){
                    if(e.message==="foreach is not defined") {
                        //console.log("...")
                    }else throw e
                }
                if(this.districtArr && this.districtArr.length > 0 && this.districtArr[1].name) {
                    this.district = this.districtArr[1].name;
                } else {
                    this.district = '';
                }
            }
}

distList.js

/**
 * Created by AklanFun on 2017/11/13.
 */
const arrAll = [
    {
        name: "廣東",
        sub: [
            {
                name: "廣州",
                sub: [ {name: "越秀區(qū)"}, {name: "荔灣區(qū)"}, {name: "海珠區(qū)"}, {name: "天河區(qū)"}, {name: "白云區(qū)"}, {name: "黃埔區(qū)"}, {name: "番禺區(qū)"}, {name: "花都區(qū)"}, {name: "南沙區(qū)"}, {name: "蘿崗區(qū)"}, {name: "增城市"}, {name: "從化市"}, {name: "其他"}],
                type: 0
            },
            {
                name: "深圳",
                sub: [ {name: "福田區(qū)"}, {name: "羅湖區(qū)"}, {name: "南山區(qū)"}, {name: "寶安區(qū)"}, {name: "龍崗區(qū)"}, {name: "鹽田區(qū)"}, {name: "其他"}],
                type: 0
            },
            {
                name: "珠海",
                sub: [ {name: "香洲區(qū)"}, {name: "斗門區(qū)"}, {name: "金灣區(qū)"}, {name: "其他"}],
                type: 0
            },
            {
                name: "汕頭",
                sub: [ {name: "金平區(qū)"}, {name: "濠江區(qū)"}, {name: "龍湖區(qū)"}, {name: "潮陽(yáng)區(qū)"}, {name: "潮南區(qū)"}, {name: "澄海區(qū)"}, {name: "南澳縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "韶關(guān)",
                sub: [ {name: "湞江區(qū)"}, {name: "武江區(qū)"}, {name: "曲江區(qū)"}, {name: "樂(lè)昌市"}, {name: "南雄市"}, {name: "始興縣"}, {name: "仁化縣"}, {name: "翁源縣"}, {name: "新豐縣"}, {name: "乳源瑤族自治縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "佛山",
                sub: [ {name: "禪城區(qū)"}, {name: "南海區(qū)"}, {name: "順德區(qū)"}, {name: "三水區(qū)"}, {name: "高明區(qū)"}, {name: "其他"}],
                type: 0
            },
            {
                name: "江門",
                sub: [ {name: "蓬江區(qū)"}, {name: "江海區(qū)"}, {name: "新會(huì)區(qū)"}, {name: "恩平市"}, {name: "臺(tái)山市"}, {name: "開平市"}, {name: "鶴山市"}, {name: "其他"}],
                type: 0
            },
            {
                name: "湛江",
                sub: [ {name: "赤坎區(qū)"}, {name: "霞山區(qū)"}, {name: "坡頭區(qū)"}, {name: "麻章區(qū)"}, {name: "吳川市"}, {name: "廉江市"}, {name: "雷州市"}, {name: "遂溪縣"}, {name: "徐聞縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "茂名",
                sub: [ {name: "茂南區(qū)"}, {name: "茂港區(qū)"}, {name: "化州市"}, {name: "信宜市"}, {name: "高州市"}, {name: "電白縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "肇慶",
                sub: [ {name: "端州區(qū)"}, {name: "鼎湖區(qū)"}, {name: "高要市"}, {name: "四會(huì)市"}, {name: "廣寧縣"}, {name: "懷集縣"}, {name: "封開縣"}, {name: "德慶縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "惠州",
                sub: [ {name: "惠城區(qū)"}, {name: "惠陽(yáng)區(qū)"}, {name: "博羅縣"}, {name: "惠東縣"}, {name: "龍門縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "梅州",
                sub: [ {name: "梅江區(qū)"}, {name: "興寧市"}, {name: "梅縣"}, {name: "大埔縣"}, {name: "豐順縣"}, {name: "五華縣"}, {name: "平遠(yuǎn)縣"}, {name: "蕉嶺縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "汕尾",
                sub: [ {name: "城區(qū)"}, {name: "陸豐市"}, {name: "海豐縣"}, {name: "陸河縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "河源",
                sub: [ {name: "源城區(qū)"}, {name: "紫金縣"}, {name: "龍川縣"}, {name: "連平縣"}, {name: "和平縣"}, {name: "東源縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "陽(yáng)江",
                sub: [ {name: "江城區(qū)"}, {name: "陽(yáng)春市"}, {name: "陽(yáng)西縣"}, {name: "陽(yáng)東縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "清遠(yuǎn)",
                sub: [ {name: "清城區(qū)"}, {name: "英德市"}, {name: "連州市"}, {name: "佛岡縣"}, {name: "陽(yáng)山縣"}, {name: "清新縣"}, {name: "連山壯族瑤族自治縣"}, {name: "連南瑤族自治縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "東莞",
                sub: [],
                type: 0
            },
            {
                name: "中山",
                sub: [],
                type: 0
            },
            {
                name: "潮州",
                sub: [ {name: "湘橋區(qū)"}, {name: "潮安縣"}, {name: "饒平縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "揭陽(yáng)",
                sub: [ {name: "榕城區(qū)"}, {name: "普寧市"}, {name: "揭東縣"}, {name: "揭西縣"}, {name: "惠來(lái)縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "云浮",
                sub: [ {name: "云城區(qū)"}, {name: "羅定市"}, {name: "云安縣"}, {name: "新興縣"}, {name: "郁南縣"}, {name: "其他"}],
                type: 0
            },
            {name: "其他"}
        ],
        type: 1
    },
    {
        name: "上海",
        sub: [
            {name: "黃浦區(qū)"}, {name: "盧灣區(qū)"}, {name: "徐匯區(qū)"}, {name: "長(zhǎng)寧區(qū)"}, {name: "靜安區(qū)"}, {name: "普陀區(qū)"}, {name: "閘北區(qū)"}, {name: "虹口區(qū)"}, {name: "楊浦區(qū)"}, {name: "寶山區(qū)"}, {name: "閔行區(qū)"}, {name: "嘉定區(qū)"}, {name: "松江區(qū)"}, {name: "金山區(qū)"}, {name: "青浦區(qū)"}, {name: "南匯區(qū)"}, {name: "奉賢區(qū)"}, {name: "浦東新區(qū)"}, {name: "崇明縣"}, {name: "其他"}
        ],
        type: 1
    },
    {
        name: "江蘇",
        sub: [
            {
                name: "南京",
                sub: [ {name: "玄武區(qū)"}, {name: "白下區(qū)"}, {name: "秦淮區(qū)"}, {name: "建鄴區(qū)"}, {name: "鼓樓區(qū)"}, {name: "下關(guān)區(qū)"}, {name: "棲霞區(qū)"}, {name: "雨花臺(tái)區(qū)"}, {name: "浦口區(qū)"}, {name: "江寧區(qū)"}, {name: "六合區(qū)"}, {name: "溧水縣"}, {name: "高淳縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "蘇州",
                sub: [ {name: "金閶區(qū)"}, {name: "平江區(qū)"}, {name: "滄浪區(qū)"}, {name: "虎丘區(qū)"}, {name: "吳中區(qū)"}, {name: "相城區(qū)"}, {name: "常熟市"}, {name: "張家港市"}, {name: "昆山市"}, {name: "吳江市"}, {name: "太倉(cāng)市"}, {name: "其他"}],
                type: 0
            },
            {
                name: "無(wú)錫",
                sub: [ {name: "崇安區(qū)"}, {name: "南長(zhǎng)區(qū)"}, {name: "北塘區(qū)"}, {name: "濱湖區(qū)"}, {name: "錫山區(qū)"}, {name: "惠山區(qū)"}, {name: "江陰市"}, {name: "宜興市"}, {name: "其他"}],
                type: 0
            },
            {
                name: "常州",
                sub: [ {name: "鐘樓區(qū)"}, {name: "天寧區(qū)"}, {name: "戚墅堰區(qū)"}, {name: "新北區(qū)"}, {name: "武進(jìn)區(qū)"}, {name: "金壇市"}, {name: "溧陽(yáng)市"}, {name: "其他"}],
                type: 0
            },
            {
                name: "鎮(zhèn)江",
                sub: [ {name: "京口區(qū)"}, {name: "潤(rùn)州區(qū)"}, {name: "丹徒區(qū)"}, {name: "丹陽(yáng)市"}, {name: "揚(yáng)中市"}, {name: "句容市"}, {name: "其他"}],
                type: 0
            },
            {
                name: "南通",
                sub: [ {name: "崇川區(qū)"}, {name: "港閘區(qū)"}, {name: "通州市"}, {name: "如皋市"}, {name: "海門市"}, {name: "啟東市"}, {name: "海安縣"}, {name: "如東縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "泰州",
                sub: [ {name: "海陵區(qū)"}, {name: "高港區(qū)"}, {name: "姜堰市"}, {name: "泰興市"}, {name: "靖江市"}, {name: "興化市"}, {name: "其他"}],
                type: 0
            },
            {
                name: "揚(yáng)州",
                sub: [ {name: "廣陵區(qū)"}, {name: "維揚(yáng)區(qū)"}, {name: "邗江區(qū)"}, {name: "江都市"}, {name: "儀征市"}, {name: "高郵市"}, {name: "寶應(yīng)縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "鹽城",
                sub: [ {name: "亭湖區(qū)"}, {name: "鹽都區(qū)"}, {name: "大豐市"}, {name: "東臺(tái)市"}, {name: "建湖縣"}, {name: "射陽(yáng)縣"}, {name: "阜寧縣"}, {name: "濱核豕Γ縣"}, {name: "響水縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "連云港",
                sub: [ {name: "新浦區(qū)"}, {name: "海州區(qū)"}, {name: "連云區(qū)"}, {name: "東海縣"}, {name: "灌云縣"}, {name: "贛榆縣"}, {name: "灌南縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "徐州",
                sub: [ {name: "云龍區(qū)"}, {name: "鼓樓區(qū)"}, {name: "九里區(qū)"}, {name: "泉山區(qū)"}, {name: "賈汪區(qū)"}, {name: "邳州市"}, {name: "新沂市"}, {name: "銅山縣"}, {name: "睢寧縣"}, {name: "沛縣"}, {name: "豐縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "淮安",
                sub: [ {name: "清河區(qū)"}, {name: "清浦區(qū)"}, {name: "楚州區(qū)"}, {name: "淮陰區(qū)"}, {name: "漣水縣"}, {name: "洪澤縣"}, {name: "金湖縣"}, {name: "盱眙縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "宿遷",
                sub: [ {name: "宿城區(qū)"}, {name: "宿豫區(qū)"}, {name: "沭陽(yáng)縣"}, {name: "泗陽(yáng)縣"}, {name: "泗洪縣"}, {name: "其他"}],
                type: 0
            },
            {name: "其他"}
        ],
        type: 1
    },
    {
        name: "浙江",
        sub: [
            {
                name: "杭州",
                sub: [ {name: "拱墅區(qū)"}, {name: "西湖區(qū)"}, {name: "上城區(qū)"}, {name: "下城區(qū)"}, {name: "江干區(qū)"}, {name: "濱江區(qū)"}, {name: "余杭區(qū)"}, {name: "蕭山區(qū)"}, {name: "建德市"}, {name: "富陽(yáng)市"}, {name: "臨安市"}, {name: "桐廬縣"}, {name: "淳安縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "寧波",
                sub: [ {name: "海曙區(qū)"}, {name: "江東區(qū)"}, {name: "江北區(qū)"}, {name: "鎮(zhèn)海區(qū)"}, {name: "北侖區(qū)"}, {name: "鄞州區(qū)"}, {name: "余姚市"}, {name: "慈溪市"}, {name: "奉化市"}, {name: "寧憾及欤縣"}, {name: "象山縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "溫州",
                sub: [ {name: "鹿城區(qū)"}, {name: "龍灣區(qū)"}, {name: "甌海區(qū)"}, {name: "瑞安市"}, {name: "樂(lè)清市"}, {name: "永嘉縣"}, {name: "洞頭縣"}, {name: "平陽(yáng)縣"}, {name: "蒼南縣"}, {name: "文成縣"}, {name: "泰順縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "嘉興",
                sub: [ {name: "秀城區(qū)"}, {name: "秀洲區(qū)"}, {name: "海寧市"}, {name: "平湖市"}, {name: "桐鄉(xiāng)市"}, {name: "嘉善縣"}, {name: "海鹽縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "湖州",
                sub: [ {name: "吳興區(qū)"}, {name: "南潯區(qū)"}, {name: "長(zhǎng)興縣"}, {name: "德清縣"}, {name: "安吉縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "紹興",
                sub: [ {name: "越城區(qū)"}, {name: "諸暨市"}, {name: "上虞市"}, {name: "嵊州市"}, {name: "紹興縣"}, {name: "新昌縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "金華",
                sub: [ {name: "婺城區(qū)"}, {name: "金東區(qū)"}, {name: "蘭溪市"}, {name: "義烏市"}, {name: "東陽(yáng)市"}, {name: "永康市"}, {name: "武義縣"}, {name: "浦江縣"}, {name: "磐安縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "衢州",
                sub: [ {name: "柯城區(qū)"}, {name: "衢江區(qū)"}, {name: "江山市"}, {name: "龍游縣"}, {name: "常山縣"}, {name: "開化縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "舟山",
                sub: [ {name: "定海區(qū)"}, {name: "普陀區(qū)"}, {name: "岱山縣"}, {name: "嵊泗縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "臺(tái)州",
                sub: [ {name: "椒江區(qū)"}, {name: "黃巖區(qū)"}, {name: "路橋區(qū)"}, {name: "臨海市"}, {name: "溫嶺市"}, {name: "玉環(huán)縣"}, {name: "天臺(tái)縣"}, {name: "仙居縣"}, {name: "三門縣"}, {name: "其他"}],
                type: 0
            },
            {
                name: "麗水",
                sub: [ {name: "蓮都區(qū)"}, {name: "龍泉市"}, {name: "縉云縣"}, {name: "青田縣"}, {name: "云和縣"}, {name: "遂昌縣"}, {name: "松陽(yáng)縣"}, {name: "慶元縣"}, {name: "景寧畬族自治縣"}, {name: "其他"}],
                type: 0
            },
            {name: "其他"}
        ],
        type: 1
    }
]

export default arrAll