省市区三级联动(vue)

vue项目中使用到三级联动,现在自己实现一个三级联动,仅供大家参考一下,直接上代码。

<template>
  <section class="container">
    <el-row>
      <el-select v-model="provinceValue" placeholder="请选择" @change="selectProvimce">
        <el-option
          v-for="(item,index) of provincearr"
          :key="index"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-select v-model="cityValue" placeholder="请选择" @change="selectcity">
        <el-option v-for="(item,index) of cityarr" :key="index" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-select placeholder="请选择" v-model="RegionValue">
        <el-option
          v-for="(item,index) of regionarr"
          :key="index"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
    </el-row>
  </section>
</template>
<script>

import { province } from '../assets/js/map'

export default {

  created () {
    this.provincearr = province
  },
  data () {
    return {
      arr: [1, 3, 4],
      province: [],
      cityarr: [],
      regionarr: [],
      provinceValue: '',
      cityValue: '',
      RegionValue: ''
    }
  },
  mounted () {
  },
  methods: {

    selectProvimce (id) {
      this.cityarr = [];
      this.regionarr = [];
      this.cityValue = '';
      this.RegionValue = '';
      for (let item of this.provincearr) {
        if (id == item.id) {
          console.log(item)
          this.cityarr = item.children
        }
      }
    },
    selectcity (id) {
      this.regionarr = [];
      this.RegionValue = '';
      for (let item of this.cityarr) {
        if (id == item.id) {
          this.regionarr = item.children
        }
      }

    }
  }
}
</script>

<style>
.container {
  width: 800px;
  height: 400px;
  overflow: hidden;
}
.box {
  width: 800px;
  height: 50px;
  line-height: 50px;
  background: red;
  color: #fff;
}
</style>

  引入的js文件如下:

const map = {
    '110000': '北京市',
    '110100': '北京市',
    '110101': '东城区',
    '110102': '西城区',
    '110105': '朝阳区',
    '110106': '丰台区',
    '110107': '石景山区',
    '110108': '海淀区',
    '110109': '门头沟区',
    '110111': '房山区',
    '110112': '通州区',
    '110113': '顺义区',
    '110114': '昌平区',
    '110115': '大兴区',
    '110116': '怀柔区',
    '110117': '平谷区',
    '110118': '密云区',
    '110119': '延庆区',
    '120000': '天津市',
    '120100': '天津市',
    '120101': '和平区',
    '120102': '河东区',
    '120103': '河西区',
    '120104': '南开区',
    '120105': '河北区',
    '120106': '红桥区',
    '120110': '东丽区',
    '120111': '西青区',
    '120112': '津南区',
    '120113': '北辰区',
    '120114': '武清区',
    '120115': '宝坻区',
    '120116': '滨海新区',
    '120117': '宁河区',
    '120118': '静海区',
    '120119': '蓟州区',
    '130000': '河北省',
    '130100': '石家庄市',
    '130102': '长安区',
    '130104': '桥西区',
    '130105': '新华区',
    '130107': '井陉矿区',
    '130108': '裕华区',
    '130109': '藁城区',
    '130110': '鹿泉区',
    '130111': '栾城区',
    '130121': '井陉县',
    '130123': '正定县',
    '130125': '行唐县',
    '130126': '灵寿县',
    '130127': '高邑县',
    '130128': '深泽县',
    '130129': '赞皇县',
    '130130': '无极县',
    '130131': '平山县',
    '130132': '元氏县',
    '130133': '赵县',
    '130181': '辛集市',
    '130183': '晋州市',
    '130184': '新乐市',
    '130200': '唐山市',
    '130202': '路南区',
    '130203': '路北区',
    '130204': '古冶区',
    '130205': '开平区',
    '130207': '丰南区',
    '130208': '丰润区',
    '130209': '曹妃甸区',
    '130223': '滦县',
    '130224': '滦南县',
    '130225': '乐亭县',
    '130227': '迁西县',
    '130229': '玉田县',
    '130281': '遵化市',
    '130283': '迁安市',
    '130300': '秦皇岛市',
    '130302': '海港区',
    '130303': '山海关区',
    '130304': '北戴河区',
    '130306': '抚宁区',
    '130321': '青龙满族自治县',
    '130322': '昌黎县',
    '130324': '卢龙县',
    '130400': '邯郸市',
    '130402': '邯山区',
    '130403': '丛台区',
    '130404': '复兴区',
    '130406': '峰峰矿区',
    '130407': '肥乡区',
    '130408': '永年区',
    '130423': '临漳县',
    '130424': '成安县',
    '130425': '大名县',
    '130426': '涉县',
    '130427': '磁县',
    '130430': '邱县',
    '130431': '鸡泽县',
    '130432': '广平县',
    '130433': '馆陶县',
    '130434': '魏县',
    '130435': '曲周县',
    '130481': '武安市',
    '130500': '邢台市',
    '130502': '桥东区',
    '130503': '桥西区',
    '130521': '邢台县',
    '130522': '临城县',
    '130523': '内丘县',
    '130524': '柏乡县',
    '130525': '隆尧县',
    '130526': '任县',
    '130527': '南和县',
    '130528': '宁晋县',
    '130529': '巨鹿县',
    '130530': '新河县',
    '130531': '广宗县',
    '130532': '平乡县',
    '130533': '威县',
    '130534': '清河县',
    '130535': '临西县',
    '130581': '南宫市',
    '130582': '沙河市',
    '130600': '保定市',
    '130602': '竞秀区',
    '130606': '莲池区',
    '130607': '满城区',
    '130608': '清苑区',
    '130609': '徐水区',
    '130623': '涞水县',
    '130624': '阜平县',
    '130626': '定兴县',
    '130627': '唐县',
    '130628': '高阳县',
    '130629': '容城县',
    '130630': '涞源县',
    '130631': '望都县',
    '130632': '安新县',
    '130633': '易县',
    '130634': '曲阳县',
    '130635': '蠡县',
    '130636': '顺平县',
    '130637': '博野县',
    '130638': '雄县',
    '130681': '涿州市',
    '130682': '定州市',
    '130683': '安国市',
    '130684': '高碑店市',
    '130700': '张家口市',
    '130702': '桥东区',
    '130703': '桥西区',
    '130705': '宣化区',
    '130706': '下花园区',
    '130708': '万全区',
    '130709': '崇礼区',
    '130722': '张北县',
    '130723': '康保县',
    '130724': '沽源县',
    '130725': '尚义县',
    '130726': '蔚县',
    '130727': '阳原县',
    '130728': '怀安县',
    '130730': '怀来县',
    '130731': '涿鹿县',
    '130732': '赤城县',
    '130800': '承德市',
    '130802': '双桥区',
    '130803': '双滦区',
    '130804': '鹰手营子矿区',
    '130821': '承德县',
    '130822': '兴隆县',
    '130824': '滦平县',
    '130825': '隆化县',
    '130826': '丰宁满族自治县',
    '130827': '宽城满族自治县',
    '130828': '围场满族蒙古族自治县',
    '130881': '平泉市',
    '130900': '沧州市',
    '130902': '新华区',
    '130903': '运河区',
    '130921': '沧县',
    '130922': '青县',
    '130923': '东光县',
    '130924': '海兴县',
    '130925': '盐山县',
    '130926': '肃宁县',
    '130927': '南皮县',
    '130928': '吴桥县',
    '130929': '献县',
    '130930': '孟村回族自治县',
    '130981': '泊头市',
    '130982': '任丘市',
    '130983': '黄骅市',
    '130984': '河间市',
    '131000': '廊坊市',
    '131002': '安次区',
    '131003': '广阳区',
    '131022': '固安县',
    '131023': '永清县',
    '131024': '香河县',
    '131025': '大城县',
    '131026': '文安县',
    '131028': '大厂回族自治县',
    '131081': '霸州市',
    '131082': '三河市',
    '131100': '衡水市',
    '131102': '桃城区',
    '131103': '冀州区',
    '131121': '枣强县',
    '131122': '武邑县',
    '131123': '武强县',
    '131124': '饶阳县',
    '131125': '安平县',
    '131126': '故城县',
    '131127': '景县',
    '131128': '阜城县',
    '131182': '深州市',
    '140000': '山西省',
    '140100': '太原市',
    '140105': '小店区',
    '140106': '迎泽区',
    '140107': '杏花岭区',
    '140108': '尖草坪区',
    '140109': '万柏林区',
    '140110': '晋源区',
    '140121': '清徐县',
    '140122': '阳曲县',
    '140123': '娄烦县',
    '140181': '古交市',
    '140200': '大同市',
    '140202': '城区',
    '140203': '矿区',
    '140211': '南郊区',
    '140212': '新荣区',
    '140221': '阳高县',
    '140222': '天镇县',
    '140223': '广灵县',
    '140224': '灵丘县',
    '140225': '浑源县',
    '140226': '左云县',
    '140227': '大同县',
    '140300': '阳泉市',
    '140302': '城区',
    '140303': '矿区',
    '140311': '郊区',
    '140321': '平定县',
    '140322': '盂县',
    '140400': '长治市',
    '140402': '城区',
    '140411': '郊区',
    '140421': '长治县',
    '140423': '襄垣县',
    '140424': '屯留县',
    '140425': '平顺县',
    '140426': '黎城县',
    '140427': '壶关县',
    '140428': '长子县',
    '140429': '武乡县',
    '140430': '沁县',
    '140431': '沁源县',
    '140481': '潞城市',
    '140500': '晋城市',
    '140502': '城区',
    '140521': '沁水县',
    '140522': '阳城县',
    '140524': '陵川县',
    '140525': '泽州县',
    '140581': '高平市',
    '140600': '朔州市',
    '140602': '朔城区',
    '140603': '平鲁区',
    '140621': '山阴县',
    '140622': '应县',
    '140623': '右玉县',
    '140624': '怀仁县',
    '140700': '晋中市',
    '140702': '榆次区',
    '140721': '榆社县',
    '140722': '左权县',
    '140723': '和顺县',
    '140724': '昔阳县',
    '140725': '寿阳县',
    '140726': '太谷县',
    '140727': '祁县',
    '140728': '平遥县',
    '140729': '灵石县',
    '140781': '介休市',
    '140800': '运城市',
    '140802': '盐湖区',
    '140821': '临猗县',
    '140822': '万荣县',
    '140823': '闻喜县',
    '140824': '稷山县',
    '140825': '新绛县',
    '140826': '绛县',
    '140827': '垣曲县',
    '140828': '夏县',
    '140829': '平陆县',
    '140830': '芮城县',
    '140881': '永济市',
    '140882': '河津市',
    '140900': '忻州市',
    '140902': '忻府区',
    '140921': '定襄县',
    '140922': '五台县',
    '140923': '代县',
    '140924': '繁峙县',
    '140925': '宁武县',
    '140926': '静乐县',
    '140927': '神池县',
    '140928': '五寨县',
    '140929': '岢岚县',
    '140930': '河曲县',
    '140931': '保德县',
    '140932': '偏关县',
    '140981': '原平市',
    '141000': '临汾市',
    '141002': '尧都区',
    '141021': '曲沃县',
    '141022': '翼城县',
    '141023': '襄汾县',
    '141024': '洪洞县',
    '141025': '古县',
    '141026': '安泽县',
    '141027': '浮山县',
    '141028': '吉县',
    '141029': '乡宁县',
    '141030': '大宁县',
    '141031': '隰县',
    '141032': '永和县',
    '141033': '蒲县',
    '141034': '汾西县',
    '141081': '侯马市',
    '141082': '霍州市',
    '141100': '吕梁市',
    '141102': '离石区',
    '141121': '文水县',
    '141122': '交城县',
    '141123': '兴县',
    '141124': '临县',
    '141125': '柳林县',
    '141126': '石楼县',
    '141127': '岚县',
    '141128': '方山县',
    '141129': '中阳县',
    '141130': '交口县',
    '141181': '孝义市',
    '141182': '汾阳市',
    '150000': '内蒙古自治区',
    '150100': '呼和浩特市',
    '150102': '新城区',
    '150103': '回民区',
    '150104': '玉泉区',
    '150105': '赛罕区',
    '150121': '土默特左旗',
    '150122': '托克托县',
    '150123': '和林格尔县',
    '150124': '清水河县',
    '150125': '武川县',
    '150200': '包头市',
    '150202': '东河区',
    '150203': '昆都仑区',
    '150204': '青山区',
    '150205': '石拐区',
    '150206': '白云鄂博矿区',
    '150207': '九原区',
    '150221': '土默特右旗',
    '150222': '固阳县',
    '150223': '达尔罕茂明安联合旗',
    '150300': '乌海市',
    '150302': '海勃湾区',
    '150303': '海南区',
    '150304': '乌达区',
    '150400': '赤峰市',
    '150402': '红山区',
    '150403': '元宝山区',
    '150404': '松山区',
    '150421': '阿鲁科尔沁旗',
    '150422': '巴林左旗',
    '150423': '巴林右旗',
    '150424': '林西县',
    '150425': '克什克腾旗',
    '150426': '翁牛特旗',
    '150428': '喀喇沁旗',
    '150429': '宁城县',
    '150430': '敖汉旗',
    '150500': '通辽市',
    '150502': '科尔沁区',
    '150521': '科尔沁左翼中旗',
    '150522': '科尔沁左翼后旗',
    '150523': '开鲁县',
    '150524': '库伦旗',
    '150525': '奈曼旗',
    '150526': '扎鲁特旗',
    '150581': '霍林郭勒市',
    '150600': '鄂尔多斯市',
    '150602': '东胜区',
    '150603': '康巴什区',
    '150621': '达拉特旗',
    '150622': '准格尔旗',
    '150623': '鄂托克前旗',
    '150624': '鄂托克旗',
    '150625': '杭锦旗',
    '150626': '乌审旗',
    '150627': '伊金霍洛旗',
    '150700': '呼伦贝尔市',
    '150702': '海拉尔区',
    '150703': '扎赉诺尔区',
    '150721': '阿荣旗',
    '150722': '莫力达瓦达斡尔族自治旗',
    '150723': '鄂伦春自治旗',
    '150724': '鄂温克族自治旗',
    '150725': '陈巴尔虎旗',
    '150726': '新巴尔虎左旗',
    '150727': '新巴尔虎右旗',
    '150781': '满洲里市',
    '150782': '牙克石市',
    '150783': '扎兰屯市',
    '150784': '额尔古纳市',
    '150785': '根河市',
    '150800': '巴彦淖尔市',
    '150802': '临河区',
    '150821': '五原县',
    '150822': '磴口县',
    '150823': '乌拉特前旗',
    '150824': '乌拉特中旗',
    '150825': '乌拉特后旗',
    '150826': '杭锦后旗',
    '150900': '乌兰察布市',
    '150902': '集宁区',
    '150921': '卓资县',
    '150922': '化德县',
    '150923': '商都县',
    '150924': '兴和县',
    '150925': '凉城县',
    '150926': '察哈尔右翼前旗',
    '150927': '察哈尔右翼中旗',
    '150928': '察哈尔右翼后旗',
    '150929': '四子王旗',
    '150981': '丰镇市',
    '152200': '兴安盟',
    '152201': '乌兰浩特市',
    '152202': '阿尔山市',
    '152221': '科尔沁右翼前旗',
    '152222': '科尔沁右翼中旗',
    '152223': '扎赉特旗',
    '152224': '突泉县',
    '152500': '锡林郭勒盟',
    '152501': '二连浩特市',
    '152502': '锡林浩特市',
    '152522': '阿巴嘎旗',
    '152523': '苏尼特左旗',
    '152524': '苏尼特右旗',
    '152525': '东乌珠穆沁旗',
    '152526': '西乌珠穆沁旗',
    '152527': '太仆寺旗',
    '152528': '镶黄旗',
    '152529': '正镶白旗',
    '152530': '正蓝旗',
    '152531': '多伦县',
    '152900': '阿拉善盟',
    '152921': '阿拉善左旗',
    '152922': '阿拉善右旗',
    '152923': '额济纳旗',
    '210000': '辽宁省',
    '210100': '沈阳市',
    '210102': '和平区',
    '210103': '沈河区',
    '210104': '大东区',
    '210105': '皇姑区',
    '210106': '铁西区',
    '210111': '苏家屯区',
    '210112': '浑南区',
    '210113': '沈北新区',
    '210114': '于洪区',
    '210115': '辽中区',
    '210123': '康平县',
    '210124': '法库县',
    '210181': '新民市',
    '210200': '大连市',
    '210202': '中山区',
    '210203': '西岗区',
    '210204': '沙河口区',
    '210211': '甘井子区',
    '210212': '旅顺口区',
    '210213': '金州区',
    '210214': '普兰店区',
    '210224': '长海县',
    '210281': '瓦房店市',
    '210283': '庄河市',
    '210300': '鞍山市',
    '210302': '铁东区',
    '210303': '铁西区',
    '210304': '立山区',
    '210311': '千山区',
    '210321': '台安县',
    '210323': '岫岩满族自治县',
    '210381': '海城市',
    '210400': '抚顺市',
    '210402': '新抚区',
    '210403': '东洲区',
    '210404': '望花区',
    '210411': '顺城区',
    '210421': '抚顺县',
    '210422': '新宾满族自治县',
    '210423': '清原满族自治县',
    '210500': '本溪市',
    '210502': '平山区',
    '210503': '溪湖区',
    '210504': '明山区',
    '210505': '南芬区',
    '210521': '本溪满族自治县',
    '210522': '桓仁满族自治县',
    '210600': '丹东市',
    '210602': '元宝区',
    '210603': '振兴区',
    '210604': '振安区',
    '210624': '宽甸满族自治县',
    '210681': '东港市',
    '210682': '凤城市',
    '210700': '锦州市',
    '210702': '古塔区',
    '210703': '凌河区',
    '210711': '太和区',
    '210726': '黑山县',
    '210727': '义县',
    '210781': '凌海市',
    '210782': '北镇市',
    '210800': '营口市',
    '210802': '站前区',
    '210803': '西市区',
    '210804': '鲅鱼圈区',
    '210811': '老边区',
    '210881': '盖州市',
    '210882': '大石桥市',
    '210900': '阜新市',
    '210902': '海州区',
    '210903': '新邱区',
    '210904': '太平区',
    '210905': '清河门区',
    '210911': '细河区',
    '210921': '阜新蒙古族自治县',
    '210922': '彰武县',
    '211000': '辽阳市',
    '211002': '白塔区',
    '211003': '文圣区',
    '211004': '宏伟区',
    '211005': '弓长岭区',
    '211011': '太子河区',
    '211021': '辽阳县',
    '211081': '灯塔市',
    '211100': '盘锦市',
    '211102': '双台子区',
    '211103': '兴隆台区',
    '211104': '大洼区',
    '211122': '盘山县',
    '211200': '铁岭市',
    '211202': '银州区',
    '211204': '清河区',
    '211221': '铁岭县',
    '211223': '西丰县',
    '211224': '昌图县',
    '211281': '调兵山市',
    '211282': '开原市',
    '211300': '朝阳市',
    '211302': '双塔区',
    '211303': '龙城区',
    '211321': '朝阳县',
    '211322': '建平县',
    '211324': '喀喇沁左翼蒙古族自治县',
    '211381': '北票市',
    '211382': '凌源市',
    '211400': '葫芦岛市',
    '211402': '连山区',
    '211403': '龙港区',
    '211404': '南票区',
    '211421': '绥中县',
    '211422': '建昌县',
    '211481': '兴城市',
    '220000': '吉林省',
    '220100': '长春市',
    '220102': '南关区',
    '220103': '宽城区',
    '220104': '朝阳区',
    '220105': '二道区',
    '220106': '绿园区',
    '220112': '双阳区',
    '220113': '九台区',
    '220122': '农安县',
    '220182': '榆树市',
    '220183': '德惠市',
    '220200': '吉林市',
    '220202': '昌邑区',
    '220203': '龙潭区',
    '220204': '船营区',
    '220211': '丰满区',
    '220221': '永吉县',
    '220281': '蛟河市',
    '220282': '桦甸市',
    '220283': '舒兰市',
    '220284': '磐石市',
    '220300': '四平市',
    '220302': '铁西区',
    '220303': '铁东区',
    '220322': '梨树县',
    '220323': '伊通满族自治县',
    '220381': '公主岭市',
    '220382': '双辽市',
    '220400': '辽源市',
    '220402': '龙山区',
    '220403': '西安区',
    '220421': '东丰县',
    '220422': '东辽县',
    '220500': '通化市',
    '220502': '东昌区',
    '220503': '二道江区',
    '220521': '通化县',
    '220523': '辉南县',
    '220524': '柳河县',
    '220581': '梅河口市',
    '220582': '集安市',
    '220600': '白山市',
    '220602': '浑江区',
    '220605': '江源区',
    '220621': '抚松县',
    '220622': '靖宇县',
    '220623': '长白朝鲜族自治县',
    '220681': '临江市',
    '220700': '松原市',
    '220702': '宁江区',
    '220721': '前郭尔罗斯蒙古族自治县',
    '220722': '长岭县',
    '220723': '乾安县',
    '220781': '扶余市',
    '220800': '白城市',
    '220802': '洮北区',
    '220821': 
  • 1
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值