国,省,市,区(县)(四级联动)

国,省,市,区(县)(四级联动)

一, 技术栈:Vue + Quasar + Vuelidate + axios

二, 具体代码(表单验证规则Vuelidate上篇文章已经写过了,这里就不多做介绍咯)

					<q-field 
                      icon="location_on"
                      :error="readonly == false? $v.baseInfoForm.country.$error: false"
                      error-label="国家不能为空"
                      class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                      <q-select
                        :readonly="readonly"  
                        :float-label="$t('国家')"
                        filter
                        :options="countryOptions"
                        @blur="$v.baseInfoForm.country.$touch"
                        v-model="baseInfoForm.country"></q-select>
                    </q-field>
                    <q-field 
                      icon="place"
                      :error="readonly == false? $v.baseInfoForm.province.$error: false"
                      error-label="省份不能为空"
                      class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                      <q-select
                        :readonly="readonly"  
                        :float-label="$t('省份')"
                        filter
                        :options="provinceOptions"
                        @blur="$v.baseInfoForm.province.$touch"
                        v-model="baseInfoForm.province"></q-select>
                    </q-field>
                    <q-field 
                      icon="place"
                      :error="readonly == false? $v.baseInfoForm.city.$error: false"
                      error-label="城市不能为空"
                      class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                      <q-select
                        :readonly="readonly"  
                        :float-label="$t('城市')"
                        filter
                        :options="cityOptions"
                        @blur="$v.baseInfoForm.city.$touch"
                        v-model="baseInfoForm.city"></q-select>
                    </q-field>
                     <q-field 
                      icon="place"
                      :error="readonly == false? $v.baseInfoForm.district.$error: false"
                      error-label="区(县)不能为空"
                      class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                      <q-select
                        :readonly="readonly"  
                        :float-label="$t('区(县)')"
                        filter
                        :options="districtOptions"
                        @blur="$v.baseInfoForm.district.$touch"
                        v-model="baseInfoForm.district"></q-select>
                    </q-field>

                  // 获取国家数据
		          	getCountryData: function() {
		            var that = this
		         	axios({
		              method: 'post',
		              url: ''
		            })
		            .then(function(data) {
		            var _arr = []
		              data.map(function(item) {
		               var _obj = {}
		               _obj.label = item.name
		               _obj.value = item.id
		                _arr.push(_obj)
		              })
		             that.countryOptions = _arr
		            })
		           .catch(function(err) {
		              console.log(err, '获取国家数据异常')
		            })
		           }
		            // 获取省份数据
			        getProvinceData: function(country) {
			          var that = this
			          axios({
			            method: 'post',
			            url: '' + country  //选择省份前需要先选择国家
			          })
			          .then(function(data) {
			              var _arr = []
			              if (data.length > 0) {
			                data.map(function(item) {
			                  var _obj = {}
			                  _obj.label = item.name
			                  _obj.value = item.id
			                  _arr.push(_obj)
			                })
			                that.provinceOptions = _arr
			            })
				      .catch(function(err) {
			            console.log(err, '获取省份数据异常')
			          })

三,具体效果如下