地址选择器 

  1 <!-- 地址选择组件 -->
  2 <template>
  3   <el-form :model="form" class="demo-ruleForm" :rules="rules" ref="form" label-position="top">
  4 
  5   <el-row :gutter="20" class="address">
  6       <el-col :span="5">
  7         <el-form-item prop="province">
  8         <el-select v-model="form.province" placeholder="请输入省" @change="proChange" >
  9           <el-option
 10             v-for="item in provinces"
 11             :key="item.value"
 12             :value="item.value">
 13           </el-option>
 14         </el-select>
 15         </el-form-item>
 16       </el-col>
 17 
 18     <el-col :span="5">
 19       <el-form-item  prop="city">
 20 
 21       <el-select v-model="form.city" placeholder="请输入市" @change="cityChange" >
 22         <el-option
 23           v-for="item in citys"
 24           :key="item.value"
 25           :value="item.value">
 26         </el-option>
 27       </el-select>
 28       </el-form-item>
 29 
 30     </el-col>
 31 
 32     <el-col :span="12">
 33       <el-form-item  prop="detail">
 34 
 35       <el-input
 36         placeholder="请填写详细地址"
 37         :number="true"
 38         v-model="form.detail">
 39       </el-input>
 40       </el-form-item>
 41 
 42     </el-col>
 43 
 44   </el-row>
 45 </el-form>
 46 </template>
 47 <script>
 48   import addressData from '../assets/js/addressData.js'
 49   import store from 'src/store.js'
 50   function formatData(data){
 51     var result = [];
 52     for(var key in data){
 53       result.push({
 54         value: key
 55       })
 56     }
 57     return result
 58   }
 59   export default {
 60     name:'address',
 61     props:['province','city','detail','isAddressTrue'],
 62     data: function () {
 63       return {
 64         rules:{
 65           province:[{required:true,message:'请选择省份',trigger:'change'}],
 66           city:[{required:true,message:'请选择城市',trigger:'change'}],
 67           detail:[{required:true,message:'请填写详细地址',trigger:'change'}]
 68         },
 69         form:{
 70           province: this.province,
 71           city: this.city,
 72           detail: this.detail
 73         },
 74         provinces: formatData(addressData)
 75       }
 76     },
 77     watch: {
 78       form: {
 79         handler:function(){
 80           store.commit('setRuleForm',this.form);
 81         },
 82         deep:true
 83       },
 84       ifCheckFrom: function (val,oldVal) {
 85         if(val){
 86           this.$refs.form.validate((valid) => {
 87           }) ;
 88         }
 89       }
 90     },
 91     computed: {
 92       citys: function (){
 93         return formatData(addressData[this.form.province])
 94       },
 95       ifCheckFrom: function () {
 96         return this.isAddressTrue
 97       }
 98     },
 99     methods: {
100       proChange: function (val,oldVal) {
101         if(oldVal){
102           this.form.city='';
103           this.form.detail='';
104         }
105         var data = formatData(addressData[this.form.province]);
106         for(var i =0; i<data.length; i++){
107           this.$set(this.citys,i,data[i]);
108         }
109       },
110       cityChange: function (val, oldVal) {
111         if (oldVal) {
112           this.form.detail = '';
113         }
114       },
115     }
116   }
117 </script>
118 <style>
119   .address .el-form-item{margin-bottom: 0!important;margin-right: 0!important;}
120 </style>

 

posted @ 2017-07-11 14:27  icuke  阅读(371)  评论(0)    收藏  举报