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

一, 技术栈: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 = thisaxios({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 = thisaxios({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, '获取省份数据异常')})

三,具体效果如下

国,省,市,区(县)(四级联动)相关推荐

国家、省、市、县四级联动 JS源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
[Python] PyQt5+Pycharm 实现省、市、区/县三级联动效果
Pyhton版本3.6 联动效果由三个py文件组成:一个是ui界面.一个逻辑脚本和省.市.区/县的信息文件. 先放上省.市.区/县的信息文件. #!usr/bin/env python # -*-co ...
Arcmap软件中将地图上的省/市/区/县的名称显示出来
本例讲解以邯郸市为例: 首先双击打开提前导进去.shp格式的邯郸市地图图层属性面板,选择Symbology--左侧Shwo--Categories--Unique values,左侧值字段选择&quo ...
Vue实现省、市、县三级联动
新入职的公司让我学习下Vue,以前没怎么学过,最近开始学习,记录下每天学习的内容,借鉴了很多前辈们的资料,如有冒犯,还请原谅. **官方文档:**https://distpicker.pigjian. ...
小程序开发--地区选择四级联动（选择省,市,县,镇）
前端时间接到一个项目,里面有涉及到地区选择四级联动(即能选择到镇).自己去网上收罗了一波,也没发现有很详细的,所以就自己来写,写完总结一下. 首先地址选择小程序有自带一个组件,我们就先来看看这个组件: ...
开源三级联动，Vue.js编写省份、城市、区、县三级联动源码
开源三级联动,Vue.js编写省份.城市.区.县三级联动源码 1.三级联动框样式上图: 请访问:这里!! 查看三级联动器效果. 2.如何在html里面引用文件的目录路径为: data.js是存放我 ...
原生JS写三级联动 --省--市--区
效果如下: css代码 <style>select{width: 100px;height: 30px;} </style> html代码 <div id="b ...
前端（HTML）——Ajax实现省、市、县联动
目录 1.什么是ajax? 2.ajax有什么优点: 3.实现省市联动需要准备什么数据? 1.提前准备数据库数据 2.引入jquery库.fastjson包 3.前端代码: 后端代码: 结果展示: 1 ...
带id的市和区/县 json数据
市和区/县 json数据 [{"name":"山东省","id":"370000","child": ...

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

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

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

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

三,具体效果如下

国,省,市,区(县)(四级联动)相关推荐

最新文章

热门文章