vue写省市级联动

  1 <template>
  2     <div>
  3       <!-- 省 -->
  4       <select v-model="provinceid" @change="updatCity()">
  5           <option v-for="(item,index) in provinceArr" :value="item.name" :key="index" >{{item.name}}</option>
  6       </select>
  7       {{provinceid}}
  8         <!-- 市 -->
  9       <select v-model="shi" @change="updatShi()">
 10           <option v-for="(item,index) in shiArr" :key="index" :value="item.name" >{{item.name}}</option>
 11       </select>
 12         {{shi}}
 13         <select  v-model="qu"  >
 14           <option v-for="(item,index) in quArr" :key="index" :value="item">{{item}}</option>
 15       </select>
 16       {{qu}}
 17     </div>
 18 </template>
 19 
 20 <script>
 21 export default{
 22     data(){
 23         return{
 24             // 数据
 25             // 存放默认市的
 26             provinceid:'北京市',
 27              provinceArr:[{
 28                 name: "北京市",
 29                 city: [{
 30                     name: "北京市",
 31                     districtAndCounty: ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云县", "延庆县", "延庆镇"]
 32                 }]
 33             }, {
 34                 name: "重庆市",
 35                 city: [{
 36                     name: "重庆市",
 37                     districtAndCounty: ["渝中区", "大渡口区", "江北区", "沙坪坝区", "九龙坡区", "南岸区", "北碚区", "万盛区", "双桥区", "渝北区", "巴南区", "万州区", "涪陵区", "黔江区", "长寿区", "合川市", "永川区市", "江津市", "南川市", "綦江县", "潼南县", "铜梁县", "大足县", "荣昌县", "璧山县", "垫江县", "武隆县", "丰都县", "城口县", "梁平县", "开县", "巫溪县", "巫山县", "奉节县", "云阳县", "忠县", "石柱土家族自治县", "彭水苗族土家族自治县", "酉阳土家族苗族自治县", "秀山土家族苗族自治县"]
 38                 }]
 39             }, {
 40                 name: "河北省",
 41                 city: [{
 42                     name: "石家庄市",
 43                     districtAndCounty: ["长安区", "桥东区", "桥西区", "新华区", "裕华区", "井陉矿区", "辛集市", "藁城市", "晋州市", "新乐市", "鹿泉市", "井陉县", "微水镇", "正定县", "正定镇", "栾城县", "栾城镇", "行唐县", "龙州镇", "灵寿县", "灵寿镇", "高邑县", "高邑镇", "深泽县", "深泽镇", "赞皇县", "赞皇镇", "无极县", "无极镇", "平山县", "平山镇", "元氏县", "槐阳镇", "赵县", "赵州镇"]
 44                 }, {
 45                     name: "张家口市",
 46                     districtAndCounty: ["桥西区", "桥东区", "宣化区", "下花园区", "宣化县", "张家口市宣化区", "张北县", "张北镇", "康保县", "康保镇", "沽源县", "平定堡镇", "尚义县", "南壕堑镇", "蔚县", "蔚州镇", "阳原县", "西城镇", "怀安县", "柴沟堡镇", "万全县", "孔家庄镇", "怀来县", "沙城镇", "涿鹿县", "涿鹿镇", "赤城县", "赤城镇", "崇礼县", "西湾子镇"]
 47                 }, {
 48                     name: "承德市",
 49                     districtAndCounty: ["双桥区", "双滦区", "鹰手营子矿区", "承德县", "下板城镇", "兴隆县", "兴隆镇", "平泉县", "平泉镇", "滦平县", "滦平镇", "隆化县", "隆化镇", "丰宁满族自治县", "大阁镇", "宽城满族自治县", "宽城镇", "围场满族蒙古族自治县", "围场镇"]
 50                 }, {
 51                     name: "秦皇岛市",
 52                     districtAndCounty: ["海港区", "山海关区", "北戴河区", "昌黎县", "昌黎镇", "抚宁县", "抚宁镇", "卢龙县", "卢龙镇", "青龙满族自治县", "青龙镇"]
 53                 }]
 54 
 55             }],
 56             // 存放默认市的
 57             shi:"北京市",
 58             shiArr:[{name:"北京市"}],
 59             // 存放默认区的
 60             qu:"东城区",
 61             quArr:["东城区"]
 62         }
 63     },
 64     methods:{
 65         // 方法  切换城市要改变数据 
 66        updatCity(){
 67            var ref=this;
 68          this.provinceArr.forEach(function(item,index){
 69              if(item.name==ref.provinceid){
 70                  ref.shiArr=item.city;
 71                 ref.shi=ref.shiArr[0].name; 
 72                  return;
 73              }
 74          })
 75             this.shiArr.forEach(function(item,index){
 76              if(item.name==ref.shi){
 77                  ref.quArr=item.districtAndCounty;
 78                   ref.qu=ref.quArr[0];
 79                  return;
 80              }
 81          }) 
 82          
 83        },
 84        updatShi(){
 85               var ref=this;
 86              this.shiArr.forEach(function(item,index){
 87              if(item.name==ref.shi){
 88                  ref.quArr=item.districtAndCounty;
 89                   ref.qu=ref.quArr[0];
 90                  return;
 91              }
 92          }) 
 93        }
 94 
 95     }
 96 
 97 }
 98 </script>
 99 
100 <style></style>

 

转载于:https://www.cnblogs.com/zhupanpan/p/11453016.html